/*!*************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************/
/*
  Basis-Zurücksetzung.

  Übernommen aus Tailwind CSS 4.3.0 (preflight.css, MIT-Lizenz,
  Copyright (c) Tailwind Labs, Inc.). Das Projekt benutzt keine einzige
  Tailwind-Klasse - gebraucht wurde nur diese Zurücksetzung, und dafür
  lohnt kein Paket samt Bauschritt. Die --theme()-Aufrufe stehen hier als
  ihre Rückfallwerte.
*/

/*
  1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
  2. Remove default margins and padding
  3. Reset all borders.
*/

::-webkit-backdrop {
  box-sizing: border-box; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 2 */
  border: 0 solid; /* 3 */
}

::-webkit-file-upload-button {
  box-sizing: border-box; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 2 */
  border: 0 solid; /* 3 */
}

*,
::after,
::before,
::backdrop,
::file-selector-button {
  box-sizing: border-box; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 2 */
  border: 0 solid; /* 3 */
}

/*
  1. Use a consistent sensible line-height in all browsers.
  2. Prevent adjustments of font size after orientation changes in iOS.
  3. Use a more readable tab size.
  4. Use the user's configured `sans` font-family by default.
  5. Use the user's configured `sans` font-feature-settings by default.
  6. Use the user's configured `sans` font-variation-settings by default.
  7. Disable tap highlights on iOS.
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4;
       tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
  1. Add the correct height in Firefox.
  2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
  3. Reset the default border style to a 1px solid border.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
  Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

/*
  Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
  Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  -webkit-text-decoration: inherit;
  text-decoration: inherit;
}

/*
  Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
  1. Use the user's configured `mono` font-family by default.
  2. Use the user's configured `mono` font-feature-settings by default.
  3. Use the user's configured `mono` font-variation-settings by default.
  4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
  Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
  Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
  1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
  2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
  3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
  Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
  Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
  Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
  Make lists unstyled by default.
*/

ol,
ul,
menu {
  list-style: none;
}

/*
  1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
  2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
      This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
  Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/*
  1. Inherit font styles in all browsers.
  2. Remove border radius in all browsers.
  3. Remove background color in all browsers.
  4. Ensure consistent opacity for disabled states in all browsers.
*/

::-webkit-file-upload-button {
  font: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  border-radius: 0; /* 2 */
  background-color: transparent; /* 3 */
  opacity: 1; /* 4 */
}

button,
input,
select,
optgroup,
textarea,
::file-selector-button {
  font: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  border-radius: 0; /* 2 */
  background-color: transparent; /* 3 */
  opacity: 1; /* 4 */
}

/*
  Restore default font weight.
*/

:where(select:is([multiple], [size])) optgroup {
  font-weight: bolder;
}

/*
  Restore indentation.
*/

:where(select:is([multiple], [size])) optgroup option {
  -webkit-padding-start: 20px;
          padding-inline-start: 20px;
}

/*
  Restore space after button.
*/

::-webkit-file-upload-button {
  -webkit-margin-end: 4px;
          margin-inline-end: 4px;
}

::file-selector-button {
  -webkit-margin-end: 4px;
          margin-inline-end: 4px;
}

/*
  Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
*/

::placeholder {
  opacity: 1;
}

/*
  Set the default placeholder color to a semi-transparent version of the current text color in browsers that do not
  crash when using `color-mix(…)` with `currentcolor`. (https://github.com/tailwindlabs/tailwindcss/issues/17194)
*/

@supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or
  (contain-intrinsic-size: 1px) /* Safari 17+ */ {
  ::placeholder {
    color: color-mix(in oklab, currentcolor 50%, transparent);
  }
}

/*
  Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
  Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
  1. Ensure date/time inputs have the same height when empty in iOS Safari.
  2. Ensure text alignment can be changed on date/time inputs in iOS Safari.
*/

::-webkit-date-and-time-value {
  min-height: 1lh; /* 1 */
  text-align: inherit; /* 2 */
}

/*
  Prevent height from changing on date/time inputs in macOS Safari when the input is set to `display: block`.
*/

::-webkit-datetime-edit {
  display: inline-flex;
}

/*
  Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers.
*/

::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

::-webkit-datetime-edit,
::-webkit-datetime-edit-year-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-minute-field,
::-webkit-datetime-edit-second-field,
::-webkit-datetime-edit-millisecond-field,
::-webkit-datetime-edit-meridiem-field {
  padding-block: 0;
}

/*
  Center dropdown marker shown on inputs with paired `<datalist>`s in Chrome. (https://github.com/tailwindlabs/tailwindcss/issues/18499)
*/

::-webkit-calendar-picker-indicator {
  line-height: 1;
}

/*
  Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
  Correct the inability to style the border radius in iOS Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
          appearance: button;
}

button,
input:where([type='button'], [type='reset'], [type='submit']),
::file-selector-button {
  -webkit-appearance: button;
     -moz-appearance: button;
          appearance: button;
}

/*
  Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
  Make elements with the HTML hidden attribute stay hidden by default.
*/

[hidden]:where(:not([hidden='until-found'])) {
  display: none !important;
}

:root {
  --background: #fafafa;
  --foreground: #5d4731;
  --topbar: #fafaf9;
  --subbar: #f3f2f1;
  --panel: #fafafa;
  --tile: #f7f6f4;
  --tile-hover: #ffffff;
  --border: #e9e4dc;
  --border-strong: #dacfc2;
  --muted: #d4c7b8;
  --muted-strong: #9e8c78;
  --primary: #dd7906;
  --active-tab: #c57828;
  --nav-text: #5d4731;
  --workplane: #e8a865;
  --workplane-soft: rgba(240, 198, 154, 0.28);
  --shadow: 0 2px 6px rgba(75, 56, 35, 0.12);
  --font-ui: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
  --dashboard-topbar-height: 70px;
  /* The whole bar. The editor measures it and overwrites this value when the
     tools wrap onto a second row (SecondaryToolbar), so everything that sits
     below the bar - workplane, status, menus - moves down with it. */
  --editor-toolbar-height: 120px;
  --editor-toolbar-title-height: 44px;
  --editor-toolbar-tools-height: 76px;
  --editor-footer-height: 30px;

--hover-accent-color: #dc3f36;
--hover-accent-border-color: #ffffff;

  /* Filament palette: the eight spool colours the whole interface draws from.
     Object colours in the scene and the tool group keys come from this one set. */
  --filament-coral: #ff5a47;
  --filament-amber: #ff9e2c;
  --filament-sun: #ffc93c;
  --filament-mint: #2fbf71;
  --filament-aqua: #16c0d4;
  --filament-cobalt: #cf7211; /* the lead colour, amber since the blue was dropped */
  --filament-violet: #8a5bf0;
  --filament-magenta: #e7399e;
  --filament-azure: #5b83c4; /* the ninth spool: the ribbon needs more keys than the scene */

  /* Toolbar surface */
  --toolbar-bg: #faf7f3;
  --toolbar-edge: #e7dfd0;
  --toolbar-divider: rgba(226, 215, 203, 0.82);
  --toolbar-label: #77695a;
  --toolbar-icon: #241f20;
  --toolbar-icon-disabled: #ebe3d4;
  /* Toolbar size setting (lib/toolbarSize.ts): the existing icons are scaled
     by the browser, see html[data-toolbar-size] below. */
  --toolbar-scale: 1;
  --toolbar-icon-size: calc(43px * var(--toolbar-scale));
  --toolbar-tile: #ffffff;
  --toolbar-hover-bg: rgba(255, 255, 255, 0.66);
  --toolbar-hover-ring: rgba(216, 201, 185, 0.86);

  /* One key colour per tool group, and no two neighbours alike. Neutral where a
     group only looks or explains rather than changing geometry, so the colour
     never cries wolf - that is Visibility and Help, which sit far apart. */
  --group-neutral: #77695a;
  --group-home: var(--filament-cobalt);
  --group-clipboard: var(--filament-aqua);
  --group-history: var(--filament-mint);
  --group-shapes: var(--filament-sun);
  --group-visibility: var(--group-neutral);
  --group-combine: var(--filament-violet);
  --group-modify: var(--filament-amber);
  --group-arrange: var(--filament-coral);
  --group-manage: var(--filament-azure);
  --group-help: var(--group-neutral);
  --group-sketch: var(--filament-magenta);
}

/* Small and large toolbar. The icons scale with --toolbar-scale; the tool row
   grows or shrinks by the same amount as an icon (43px * 0.25 = ~11px). The
   row height stays a plain number because the editor reads it from script. */
html[data-toolbar-size="small"] {
  --toolbar-scale: 0.75;
  --editor-toolbar-tools-height: 65px;
  --editor-toolbar-height: 109px;
}

html[data-toolbar-size="large"],
html[data-simple-mode="on"]:not([data-toolbar-size]) {
  --toolbar-scale: 1.25;
  --editor-toolbar-tools-height: 87px;
  --editor-toolbar-height: 131px;
}

/* Large icons no longer fit the widths measured for the media queries below,
   so the groups wrap onto a further row at any width rather than being cut off. */
html[data-toolbar-size="large"] .toolbar-mode-content,
html[data-toolbar-size="large"] .sketch-toolbar-ribbon,
html[data-simple-mode="on"]:not([data-toolbar-size]) .toolbar-mode-content,
html[data-simple-mode="on"]:not([data-toolbar-size]) .sketch-toolbar-ribbon {
  flex-wrap: wrap;
  height: auto;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-ui);
  letter-spacing: 0;
  /* On a Mac the default smoothing makes the heavy weights look thick and soft on Retina screens. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button,
a,
input {
  font: inherit;
}

button {
  border: 0;
}

.editor-stage {
  display: none;
}

.editor-stage.active {
  display: block;
}

.editor-loading-screen {
  position: fixed;
  inset: 0;
  z-index: 200;
  min-width: 320px;
  overflow: hidden;
  background: #fbfaf8;
  animation: editor-loading-enter 160ms ease-out both;
}

.editor-skeleton-shimmer {
  position: relative;
  display: block;
  overflow: hidden;
  background: #ede6da;
  border-radius: 5px;
}

.editor-skeleton-shimmer::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(
    105deg,
    transparent 18%,
    rgba(255, 255, 255, 0.34) 38%,
    rgba(255, 255, 255, 0.78) 50%,
    rgba(255, 255, 255, 0.34) 62%,
    transparent 82%
  );
  transform: translateX(-115%);
  animation: editor-skeleton-shimmer 1.55s ease-in-out infinite;
}

.editor-loading-toolbar {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 1;
  height: var(--editor-toolbar-height);
  background: #f9f6f1;
  border-bottom: 1px solid #e7dfd0;
  box-shadow: 0 1px 2px rgba(72, 53, 32, 0.05);
}

.editor-loading-tabs {
  position: absolute;
  top: 0;
  left: 10px;
  display: flex;
  width: 209px;
  height: 32px;
  align-items: center;
  gap: 22px;
  padding: 0 14px;
}

.editor-loading-tabs span:first-child {
  width: 76px;
  height: 8px;
  border-radius: 999px;
}

.editor-loading-tabs span:last-child {
  width: 54px;
  height: 7px;
  border-radius: 999px;
}

.editor-loading-tool-groups {
  position: absolute;
  inset: 32px 0 0 0;
  display: flex;
  align-items: stretch;
  background: #faf7f3;
  border-top: 1px solid #ede6db;
}

.editor-loading-tool-cluster {
  display: flex;
  height: var(--editor-toolbar-tools-height);
}

.editor-loading-toolbar-spacer {
  min-width: 0;
  flex: 1 1;
}

.editor-loading-tool-section {
  position: relative;
  height: var(--editor-toolbar-tools-height);
  flex: 0 0 auto;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.08) 44%, rgba(232, 221, 210, 0.16));
  border-right: 1px solid #eae2d5;
}

.editor-loading-tool-section.home { width: 88.8px; }
.editor-loading-tool-section.clipboard { width: 178.8px; }
.editor-loading-tool-section.history { width: 92.8px; }
.editor-loading-tool-section.shapes { width: 82px; }
.editor-loading-tool-section.visibility { width: 92.8px; }
.editor-loading-tool-section.combine { width: 135.8px; }
.editor-loading-tool-section.modify { width: 221.8px; }
.editor-loading-tool-section.arrange { width: 92.8px; }
.editor-loading-tool-section.manage { width: 152px; }

.editor-loading-section-label {
  position: absolute;
  top: 7px;
  left: 50%;
  width: min(64px, calc(100% - 18px));
  height: 7px;
  border-radius: 999px;
  transform: translateX(-50%);
}

.editor-loading-section-controls {
  position: absolute;
  top: 28px;
  left: 50%;
  display: flex;
  transform: translateX(-50%);
}

.editor-loading-tool-section.manage .editor-loading-section-controls {
  gap: 5px;
}

.editor-loading-tool {
  width: 43px;
  height: 43px;
  flex: 0 0 43px;
  border-radius: 8px;
}

.editor-loading-tool-section.shapes .editor-loading-tool {
  width: 45px;
  flex-basis: 45px;
}

.editor-loading-tool-section:nth-child(even) .editor-skeleton-shimmer::after,
.editor-loading-tool-cluster:last-child .editor-loading-tool-section:nth-child(odd) .editor-skeleton-shimmer::after {
  animation-delay: -520ms;
}

.editor-loading-model .editor-skeleton-shimmer::after {
  animation-delay: -960ms;
}

.editor-loading-body {
  position: absolute;
  inset: var(--editor-toolbar-height) 0 0 0;
  display: flex;
  min-height: 0;
}

.editor-loading-viewport {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #fcfaf6;
  background-image:
    linear-gradient(rgba(178, 138, 95, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(178, 138, 95, 0.12) 1px, transparent 1px);
  background-position: center;
  background-size: 28px 28px;
}

.editor-loading-viewport::after {
  position: absolute;
  top: 52%;
  left: 50%;
  width: min(64vw, 760px);
  height: min(48vw, 520px);
  content: "";
  background: radial-gradient(ellipse, rgba(99, 79, 58, 0.09), transparent 68%);
  transform: translate(-50%, -50%);
}

.editor-loading-model {
  position: absolute;
  top: 51%;
  left: 48%;
  z-index: 2;
  width: 182px;
  height: 160px;
  transform: translate(-50%, -50%);
}

.editor-loading-model span {
  position: absolute;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(94, 72, 48, 0.08);
}

.editor-loading-model-top {
  top: 9px;
  left: 24px;
  width: 132px;
  height: 66px;
  -webkit-clip-path: polygon(50% 0, 100% 44%, 50% 100%, 0 44%);
          clip-path: polygon(50% 0, 100% 44%, 50% 100%, 0 44%);
}

.editor-loading-model-front {
  top: 66px;
  left: 24px;
  width: 66px;
  height: 78px;
  -webkit-clip-path: polygon(0 0, 100% 27%, 100% 100%, 0 72%);
          clip-path: polygon(0 0, 100% 27%, 100% 100%, 0 72%);
}

.editor-loading-model-side {
  top: 66px;
  left: 90px;
  width: 66px;
  height: 78px;
  -webkit-clip-path: polygon(0 27%, 100% 0, 100% 72%, 0 100%);
          clip-path: polygon(0 27%, 100% 0, 100% 72%, 0 100%);
}

.editor-loading-viewport-controls {
  position: absolute;
  top: 173px;
  left: 10px;
  z-index: 2;
  display: grid;
  width: 56px;
  height: 241px;
  padding: 5px 6px;
  align-content: start;
  grid-gap: 2px;
  gap: 2px;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid #eae2d5;
  border-radius: 18px;
  box-shadow: 0 4px 14px rgba(72, 53, 32, 0.12);
}

.editor-loading-viewport-controls span {
  width: 44px;
  height: 43px;
  border-radius: 9px;
}

.editor-loading-viewport-controls span:last-child {
  margin-top: 4px;
}

.editor-loading-status {
  position: absolute;
  bottom: 18px;
  left: 64px;
  z-index: 2;
  width: 70px;
  height: 37px;
  border-radius: 3px;
}

.editor-loading-snap {
  position: absolute;
  right: 12px;
  bottom: 11px;
  z-index: 2;
  width: 75px;
  height: 22px;
  border-radius: 2px;
}

@keyframes editor-loading-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes editor-skeleton-shimmer {
  0% { transform: translateX(-115%); }
  58%,
  100% { transform: translateX(115%); }
}

@media (max-width: 720px) {
  .editor-loading-toolbar-spacer {
    min-width: 80px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .editor-loading-screen {
    animation: none;
  }

  .editor-skeleton-shimmer::after {
    animation: none;
    opacity: 0.45;
    transform: translateX(20%);
  }
}

.dashboard-shell {
  width: 100vw;
  height: 100vh;
  min-width: 320px;
  overflow: auto;
  background: #faf7f3;
  color: #573f26;
}

.dashboard-topbar {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 8;
  display: grid;
  /* The brand track is never squeezed below its content: the search field
     gives up width first, so the lockup cannot be clipped. */
  grid-template-columns: minmax(max-content, 1fr) minmax(280px, 620px) minmax(0, 1fr);
  grid-gap: 28px;
  gap: 28px;
  align-items: center;
  width: 100%;
  height: var(--dashboard-topbar-height);
  min-height: var(--dashboard-topbar-height);
  padding: 0 16px;
  color: #231a11;
  background: #ffffff;
  border-bottom: 1px solid #ede4d4;
  box-shadow: 0 1px 2px rgba(74, 40, 5, 0.04);
  font-family: Arial, Helvetica, sans-serif;
}

.dashboard-brand {
  display: inline-flex;
  width: max-content;
  min-width: 0;
  align-items: center;
  gap: 12px;
  color: #231a11;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
}

/* The mark needs no ground of its own now that the bar is light. */
.dashboard-brand img {
  display: block;
  width: 44px;
  height: 44px;
  object-fit: contain;
}

/* The lockup: mark, name, and the claim set under the name rather than
   beside it, which is how the logo is drawn. */
.dashboard-brand-text {
  display: grid;
  min-width: 0;
  /* The name below carries its own breathing room in its line height, so the
     two lines need no extra gap on top of it. */
  grid-gap: 0;
  gap: 0;
}

.dashboard-brand-name {
  /* `overflow: hidden` is what makes the ellipsis work when the window gets
     narrow - but it also clips whatever sticks out of the line box. At 1.12 the
     box was shorter than the glyphs, and the descender of the g was cut off.
     1.4 leaves the letters room; the name is a wordmark, not running text. */
  overflow: hidden;
  color: #231a11;
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-brand .dashboard-tagline {
  overflow: hidden;
  color: #7a6650;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Below this the bar keeps the name and drops the claim. */
@media (max-width: 900px) {
  .dashboard-brand .dashboard-tagline {
    display: none;
  }
}

.dashboard-brand:hover {
  opacity: 0.82;
}

.dashboard-brand:focus-visible {
  outline: 3px solid #b46007;
  outline-offset: 4px;
}

.dashboard-search {
  display: flex;
  width: 100%;
  min-width: 0;
  height: 40px;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  color: #8a7460;
  background: #fbf7ef;
  border: 1px solid #e9dfcd;
  border-radius: 7px;
  box-shadow: none;
}

.dashboard-search input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  color: #563e24;
  background: transparent;
  font-size: 14px;
}

.dashboard-action-tile,
.project-card,
.dashboard-segmented button,
.dashboard-select {
  transition:
    background 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease,
    transform 140ms ease;
}

/* Exactly the space under the bar. A stale 64px here against a 70px bar left
   the page six pixels too tall and put a scrollbar on content that fits. */
.dashboard-layout {
  min-height: calc(100vh - var(--dashboard-topbar-height));
}

.dashboard-main {
  min-width: 0;
  padding: 22px;
}

/* The operator's legal pages, where a visitor expects them. */
/* Two halves that push apart: this installation on the left, the project on
   the right. At phone width they stop pushing and stack instead. */
.dashboard-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
  margin-top: 28px;
  padding-top: 14px;
  border-top: 1px solid #ede4d4;
  font-size: 13px;
  font-weight: 700;
}

.dashboard-trademark {
  flex: 1 0 100%;
  margin: 0;
  color: #988672;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
}

html[data-theme="dark"] .dashboard-trademark {
  color: #b3a48d;
}

.dashboard-legal-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.dashboard-legal-dot {
  color: #c0ac93;
  font-weight: 400;
}

/* Die Sprachwahl oben rechts: zwei kleine Fahnen mit Kürzel, die gewählte
   hervorgehoben. Sie steht in der Kopfzeile der Startseite und in der
   Titelzeile des Editors, deshalb bringt sie ihre Größe selbst mit. */
.language-switch {
  display: inline-flex;
  flex: none;
  gap: 2px;
  font-size: 13px;
  font-weight: 700;
}

.dashboard-topbar-actions {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: 8px;
}

.dashboard-topbar .language-switch {
  justify-self: end;
}

.toolbar-title-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 14px 7px auto;
  align-self: center;
}

.dashboard-topbar-actions .language-switch,
.dashboard-topbar-actions .theme-switch,
.toolbar-title-row-actions .language-switch,
.toolbar-title-row-actions .theme-switch {
  margin: 0;
}

/* Theme-Umschalter neben der Sprachwahl */
.theme-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: none;
  font-size: 13px;
  font-weight: 700;
}

.theme-switch-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 27px;
  box-sizing: border-box;
  padding: 0 8px;
  color: #8a7560;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

.theme-switch-button:hover,
.theme-switch-button:focus-visible,
.theme-switch-button.active {
  color: #573f26;
  background: #f0e4d2;
}

.theme-switch-icon {
  flex-shrink: 0;
  opacity: 0.9;
}

.theme-switch-label {
  line-height: 1;
}

.theme-chevron {
  flex-shrink: 0;
  opacity: 0.6;
  transition: transform 140ms ease;
}

.theme-chevron.open {
  transform: rotate(180deg);
}

.theme-dropdown-menu {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  min-width: 140px;
  padding: 5px;
  background: #ffffff;
  border: 1px solid #e5dacd;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(74, 40, 5, 0.12), 0 2px 6px rgba(74, 40, 5, 0.06);
}

.theme-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  color: #6d543b;
  background: transparent;
  border: 0;
  border-radius: 5px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background-color 100ms ease, color 100ms ease;
}

.theme-dropdown-item:hover,
.theme-dropdown-item:focus-visible {
  color: #3b2816;
  background: #f5ece0;
}

.theme-dropdown-item.active {
  color: #cf710f;
  background: #faf4eb;
  font-weight: 750;
}

.theme-item-label {
  flex: 1 1 auto;
  white-space: nowrap;
}

.theme-check {
  flex-shrink: 0;
  margin-left: auto;
  color: #cf710f;
}

/* The one thing in this row that asks for something, so it is the one thing
   that looks like a control. Both selectors carry the element too, otherwise
   `.dashboard-legal a` above wins on specificity and the colour never lands.
   The negative vertical margin keeps the padded pill from making the row
   taller than the plain links beside it. */
.dashboard-legal a.dashboard-legal-sponsor {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-block: -5px;
  padding: 5px 12px;
  border: 1px solid #edcfa2;
  border-radius: 999px;
  background: #fdf3e2;
  color: #9a5a06;
}

.dashboard-legal a.dashboard-legal-sponsor:hover {
  border-color: #ad6206;
  background: #fbe8cc;
  color: #8a4f05;
  text-decoration: none;
}

.dashboard-legal a.dashboard-legal-update {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-block: -5px;
  padding: 4px 10px;
  border: 1px solid #7bc882;
  border-radius: 999px;
  background: #eef8ef;
  color: #23742b;
  font-weight: 700;
}

.dashboard-legal a.dashboard-legal-update:hover {
  border-color: #278130;
  background: #e0f4e2;
  color: #1a5c21;
  text-decoration: none;
}

.dashboard-update-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  padding: 10px 16px;
  border: 1px solid #b7e2bc;
  border-radius: 10px;
  background: #f1f9f2;
  color: #1e5927;
  font-size: 13px;
  font-weight: 700;
}

.tab-presence-notice {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: min(640px, calc(100vw - 32px));
  padding: 10px 12px 10px 14px;
  transform: translateX(-50%);
  border: 1px solid #e8c37a;
  border-radius: 10px;
  background: #fff6e0;
  color: #6b4a08;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  box-shadow: 0 8px 24px rgba(60, 40, 0, 0.18);
}

.tab-presence-icon {
  flex: none;
  color: #b7791f;
}

.tab-presence-actions {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  gap: 6px;
}

.tab-presence-reload {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid #d6a24a;
  border-radius: 8px;
  background: #ffffff;
  color: #6b4a08;
  font: inherit;
  cursor: pointer;
}

.tab-presence-reload:hover,
.tab-presence-reload:focus-visible {
  background: #fdecc4;
}

.dashboard-update-notice-content {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.dashboard-update-icon {
  flex-shrink: 0;
  color: #2a8334;
}

.dashboard-update-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #1a6424;
  font-weight: 600;
  text-decoration: underline;
}

.dashboard-update-link:hover {
  color: #0f4016;
}

.dashboard-update-dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border: none;
  background: transparent;
  color: #4a7a51;
  border-radius: 6px;
  cursor: pointer;
}

.dashboard-update-dismiss:hover {
  background: #d8eedb;
  color: #194a20;
}

/* Under the notice: a button that opens what the update brings. */
.dashboard-update-preview {
  display: grid;
  flex: 0 0 100%;
  grid-gap: 8px;
  gap: 8px;
}

.dashboard-update-preview-toggle {
  justify-self: start;
  padding: 0;
  color: #1a6424;
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.dashboard-update-preview-toggle:hover {
  color: #0f4016;
}

.dashboard-update-preview-body {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
  max-height: min(50vh, 420px);
  padding-top: 8px;
  overflow-y: auto;
  border-top: 1px solid #b7e2bc;
}

.dashboard-update-preview-body p {
  margin: 0;
  font-weight: 600;
}

.dashboard-update-preview .whats-new-version h2 {
  color: #2a8334;
}

.dashboard-update-preview .whats-new-version li span {
  color: inherit;
  opacity: 0.88;
}

.dashboard-legal a {
  color: #7a6650;
  text-decoration: none;
}

.dashboard-legal a:hover {
  color: #ad6206;
  text-decoration: underline;
}

.dashboard-actions-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  grid-gap: 14px;
  gap: 14px;
  margin-bottom: 24px;
}

.dashboard-import-notice {
  margin: -12px 0 20px;
  color: #6c5640;
  font-size: 13px;
  font-weight: 600;
}

/* The recommendation to install layerling as an app: a card under the start tiles that is meant
   to be seen - what it brings, an install button where the browser has one, "Not now" for two
   weeks and a cross for good. */
.install-app-hint {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: -8px 0 22px;
  padding: 14px 14px 14px 16px;
  background: linear-gradient(135deg, #fff3e0 0%, #ffe6c2 100%);
  border: 2px solid #e08a2c;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(191, 101, 8, 0.14);
}

.install-app-hint-icon {
  display: grid;
  flex: none;
  width: 42px;
  height: 42px;
  place-items: center;
  color: #ffffff;
  background: #d9730d;
  border-radius: 10px;
}

.install-app-hint-text {
  display: grid;
  flex: 1 1;
  min-width: 0;
  grid-gap: 3px;
  gap: 3px;
}

.install-app-hint-text strong {
  color: #4a2f10;
  font-size: 16px;
  font-weight: 600;
}

.install-app-hint-text span {
  color: #5e4630;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.5;
}

.install-app-hint-actions {
  display: grid;
  flex: none;
  grid-gap: 6px;
  gap: 6px;
  justify-items: stretch;
}

.install-app-hint-button {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  background: #bf6508;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
}

a.install-app-hint-button {
  text-decoration: none;
}

.install-app-hint-button:hover {
  background: #a95805;
}

.install-app-hint-later {
  padding: 5px 10px;
  color: #7a5a35;
  font-size: 13px;
  font-weight: 700;
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
}

.install-app-hint-later:hover {
  color: #573f26;
  background: #fbe1bd;
}

.install-app-hint-close {
  display: grid;
  flex: none;
  align-self: flex-start;
  width: 30px;
  height: 30px;
  place-items: center;
  color: #96816a;
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
}

.install-app-hint-close:hover {
  color: #573f26;
  background: #fbe1bd;
}

/* In the editor the same card floats at the foot of the work area, above the footer, until it is
   answered; the start page keeps it in the flow. */
.install-app-hint.install-app-hint-floating {
  position: fixed;
  bottom: 52px;
  left: 50%;
  z-index: 55;
  width: min(680px, calc(100vw - 32px));
  margin: 0;
  transform: translateX(-50%);
  box-shadow: 0 10px 28px rgba(60, 40, 10, 0.28);
}

/* Where the support reminder shares the foot of the screen, the install card steps up above it
   instead of covering it (its 380 px sit at the right, the card is centred). */
@media (max-width: 1400px) {
  body:has(.support-nudge) .install-app-hint.install-app-hint-floating {
    bottom: 190px;
  }
}

/* The name of a control under a hovering Apple Pencil, like a mouse's tooltip (#495). */
.pen-hover-tip {
  position: fixed;
  z-index: 3000;
  box-sizing: border-box;
  max-width: 260px;
  padding: 6px 10px;
  border-radius: 6px;
  background: #2b2118;
  color: #fff7ea;
  box-shadow: 0 4px 14px rgba(43, 33, 24, 0.35);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: break-word;
  pointer-events: none;
  transform: translateX(-50%);
}

/* On a tablet over https both cards can float at once (install and tablet): the tablet card steps up. */
body:has(.install-app-hint-floating:not(.tablet-hint)) .install-app-hint.install-app-hint-floating.tablet-hint {
  bottom: 230px;
}

@media (max-width: 700px) {
  .install-app-hint.install-app-hint-floating {
    left: 16px;
    transform: none;
    width: calc(100vw - 32px);
  }

  .install-app-hint {
    flex-wrap: wrap;
  }

  .install-app-hint-actions {
    order: 3;
    margin-left: 56px;
  }
}

/* The reminder about supporting the project: a small card above the footer,
   shown at most every two weeks and only where a support address is set. */
.support-nudge {
  position: fixed;
  right: 16px;
  bottom: 52px;
  z-index: 60;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: min(380px, calc(100vw - 32px));
  padding: 14px 10px 14px 14px;
  background: #fff8ee;
  border: 1px solid #f0d9b8;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(60, 40, 10, 0.18);
}

.support-nudge-icon {
  display: grid;
  flex: none;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #bf6508;
  background: #fdebd3;
  border-radius: 9px;
}

.support-nudge-text {
  display: grid;
  flex: 1 1;
  min-width: 0;
  grid-gap: 4px;
  gap: 4px;
}

.support-nudge-text strong {
  color: #573f26;
  font-size: 14px;
  font-weight: 600;
}

.support-nudge-text span {
  color: #7a6650;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}

.support-nudge-link {
  justify-self: start;
  margin-top: 4px;
  padding: 7px 12px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  background: #bf6508;
  border-radius: 8px;
}

.support-nudge-link:hover {
  background: #a95805;
}

.support-nudge-close {
  display: grid;
  flex: none;
  width: 28px;
  height: 28px;
  place-items: center;
  color: #96816a;
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
}

.support-nudge-close:hover {
  color: #573f26;
  background: #f6e9d6;
}

/* The command search (Ctrl+K): a window near the top of the screen over a dimmed
   page. It takes the theme's colours, so the dark and graphite themes need no
   rules of their own. */
.command-palette-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  align-items: start;
  justify-items: center;
  padding: max(12vh, 56px) 16px 16px;
  background: rgba(40, 28, 16, 0.34);
}

.command-palette {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  width: min(640px, 100%);
  max-height: min(560px, calc(100vh - max(12vh, 56px) - 24px));
  overflow: hidden;
  color: var(--foreground);
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: 0 18px 48px rgba(40, 28, 16, 0.32);
}

.command-palette-grip {
  display: grid;
  height: 14px;
  place-items: center;
  cursor: -webkit-grab;
  cursor: grab;
  touch-action: none;
}

.command-palette-grip span {
  width: 36px;
  height: 4px;
  background: var(--border-strong);
  border-radius: 2px;
}

.command-palette.moving,
.command-palette.moving .command-palette-grip {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.command-palette-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px 0 14px;
  color: var(--muted-strong);
  border-bottom: 1px solid var(--border);
}

.command-palette-search input {
  flex: 1 1;
  min-width: 0;
  padding: 14px 0;
  color: var(--foreground);
  font: 600 16px/1.3 var(--font-ui);
  background: transparent;
  border: 0;
  outline: 0;
}

.command-palette-search input::placeholder {
  color: var(--muted-strong);
  font-weight: 500;
}

.command-palette-close {
  display: grid;
  flex: none;
  width: 30px;
  height: 30px;
  place-items: center;
  color: var(--muted-strong);
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
}

.command-palette-close:hover {
  color: var(--foreground);
  background: var(--tile-hover);
}

.command-palette-list {
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  list-style: none;
}

.command-palette-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 4px 10px;
  border-radius: 7px;
  cursor: pointer;
}

.command-palette-item.selected {
  background: var(--tile-hover);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}

.command-palette-item.disabled {
  opacity: 0.5;
  cursor: default;
}

.command-palette-item.active .command-palette-label::after {
  margin-left: 8px;
  color: var(--primary);
  font-size: 11px;
  font-weight: 600;
  content: "●";
}

.command-palette-heading {
  padding: 8px 10px 4px;
  color: var(--muted-strong);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.command-palette-icon {
  display: grid;
  flex: none;
  width: 28px;
  height: 28px;
  place-items: center;
}

.command-palette-icon img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.command-palette-icon svg,
.command-palette-icon .sketch-reference-icon {
  width: 22px;
  height: 22px;
  color: var(--foreground);
}

.command-palette-label {
  flex: 1 1;
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.command-palette-keys {
  display: inline-flex;
  flex: none;
  gap: 3px;
}

.command-palette-keys kbd {
  padding: 1px 6px;
  color: var(--foreground);
  font: 700 11px/1.5 var(--font-ui);
  background: var(--tile);
  border: 1px solid var(--border-strong);
  border-radius: 5px;
}

.command-palette-group {
  flex: none;
  min-width: 84px;
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: 700;
  text-align: right;
}

.command-palette-empty {
  margin: 0;
  padding: 22px 18px;
  color: var(--muted-strong);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}

.command-palette-footer {
  padding: 8px 14px;
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: 600;
  border-top: 1px solid var(--border);
}

.command-palette-blocked {
  color: var(--primary);
  font-weight: 600;
}

@media (max-width: 560px) {
  .command-palette-keys,
  .command-palette-group {
    display: none;
  }
}

.toolbar-search-icon {
  width: calc(var(--toolbar-icon-size) - 6px);
  height: calc(var(--toolbar-icon-size) - 6px);
  color: var(--toolbar-icon);
}

.action-buttons .action-icon-button:hover .toolbar-search-icon {
  color: var(--group-color, var(--toolbar-icon));
}

/* "New since your last visit": a card on the start page, in the warm tones of
   the other hints and in the theme colours on the dark ground. */
.whats-new {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  margin: -8px 0 22px;
  padding: 14px 16px;
  color: #573f26;
  background: #fff8ee;
  border: 1px solid #f0d9b8;
  border-radius: 10px;
}

.whats-new-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.whats-new-header strong {
  flex: 1 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
}

.whats-new-icon {
  display: grid;
  flex: none;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #bf6508;
  background: #fdebd3;
  border-radius: 9px;
}

.whats-new-close {
  display: grid;
  flex: none;
  width: 28px;
  height: 28px;
  place-items: center;
  color: #96816a;
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
}

.whats-new-close:hover {
  color: #573f26;
  background: #f6e9d6;
}

.whats-new-body {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
  max-height: min(60vh, 520px);
  overflow-y: auto;
}

.whats-new-note {
  margin: 0;
  color: #7a6650;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
}

.whats-new-note a {
  color: #bf6508;
  font-weight: 600;
}

.whats-new-version h2 {
  margin: 0 0 6px;
  color: #bf6508;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.whats-new-version ul {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.whats-new-version li {
  display: grid;
  grid-gap: 2px;
  gap: 2px;
}

.whats-new-version li strong {
  font-size: 14px;
  font-weight: 600;
}

.whats-new-version li span {
  color: #7a6650;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}

.whats-new-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

/* The versions from before the last visit: a line and a quiet heading set them off. */
.whats-new-earlier-heading {
  margin: 4px 0 0;
  padding-top: 10px;
  border-top: 1px solid #f0d9b8;
  color: #7a6650;
  font-size: 13px;
  font-weight: 700;
}

.whats-new-earlier {
  padding: 7px 12px;
  color: #7a6650;
  font-size: 13px;
  font-weight: 700;
  background: transparent;
  border: 1px solid #e3cfae;
  border-radius: 8px;
  cursor: pointer;
}

.whats-new-earlier:hover {
  background: #f6e9d6;
}

.whats-new-done {
  padding: 8px 16px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  background: #bf6508;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.whats-new-done:hover {
  background: #a95805;
}

html[data-theme="dark"] .whats-new {
  color: #f3ede3;
  background: var(--panel);
  border-color: #6a4a26;
}

html[data-theme="dark"] .whats-new-icon {
  color: #f3a452;
  background: #3a2c16;
}

html[data-theme="dark"] .whats-new-note {
  color: #bda78e;
}

html[data-theme="dark"] .whats-new-note a {
  color: #f3a452;
}

html[data-theme="dark"] .whats-new-version h2 {
  color: #f3a452;
}

html[data-theme="dark"] .whats-new-version li span,
html[data-theme="dark"] .whats-new-close,
html[data-theme="dark"] .whats-new-earlier,
html[data-theme="dark"] .whats-new-earlier-heading {
  color: #bda78e;
}

html[data-theme="dark"] .whats-new-earlier,
html[data-theme="dark"] .whats-new-earlier-heading {
  border-color: #6a4a26;
}

html[data-theme="dark"] .whats-new-close:hover,
html[data-theme="dark"] .whats-new-earlier:hover {
  color: #f3ede3;
  background: #3a2c16;
}

.dashboard-action-tile {
  display: flex;
  min-width: 0;
  min-height: 88px;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  color: #573f26;
  background: #fcfbf8;
  border: 1px solid #ede5d7;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 1px 2px rgba(71, 52, 31, 0.05);
}

.dashboard-action-tile:hover,
.project-card:hover {
  border-color: #f3a452;
  box-shadow: 0 5px 15px rgba(82, 58, 32, 0.12);
  transform: translateY(-1px);
}

/* All three start tiles look the same at rest (cream ground, plain border); the create tile only differs by its orange icon. */
.dashboard-action-icon {
  display: grid;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  place-items: center;
  color: #ffffff;
  background: #dd7906;
  border-radius: 8px;
}

/* No square behind the icon of the plain tiles: only the create tile has one (solid orange). */
.dashboard-action-tile:not(.create) .dashboard-action-icon {
  color: #563e25;
  background: transparent;
}

.dashboard-action-tile span:last-of-type {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 16px;
  font-weight: 600;
}

/*
 * On a phone the start page used to put the designs more than a screen down, behind three big tiles. Once there are
 * designs, the tiles become one short row, so the designs start in the first screen (a donor's wish by mail).
 */
@media (max-width: 560px) {
  .dashboard-main.has-projects {
    display: flex;
    flex-direction: column;
  }

  .dashboard-main.has-projects .dashboard-actions-band {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 16px;
  }

  .dashboard-main.has-projects .dashboard-action-tile {
    min-height: 0;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 10px 6px;
    text-align: center;
  }

  .dashboard-main.has-projects .dashboard-action-tile span:last-of-type {
    font-size: 12.5px;
    line-height: 1.2;
  }

  .dashboard-main.has-projects .dashboard-action-icon {
    width: 36px;
    height: 36px;
  }
}

.dashboard-section-header {
  display: flex;
  min-width: 0;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.dashboard-section-header h1 {
  margin: 0;
  color: #553c21;
  font-size: 28px;
  line-height: 1.1;
}

/* The line under the heading. It used to be written as `.dashboard-section-header
   span`, which reached every span in the header - the folder in the trail and
   the labels inside the buttons beside it, all pushed down by those 4px. It is
   a class now, so it only touches the one line it was written for. */
.dashboard-section-subtitle {
  display: inline-block;
  margin-top: 4px;
  color: #97836e;
  font-size: 13px;
}

.dashboard-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px;
}

.dashboard-select {
  display: inline-flex;
  height: 36px;
  align-items: center;
  gap: 7px;
  padding: 0 9px;
  color: #6f5840;
  background: #ffffff;
  border: 1px solid #eae2d4;
  border-radius: 6px;
}

.dashboard-backup-button {
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.dashboard-backup-button:hover {
  border-color: #e3b77c;
}

.dashboard-new-on-server {
  font-size: 14px;
  cursor: pointer;
}

.dashboard-new-on-server input {
  margin: 0;
  accent-color: #c9731d;
}

.dashboard-select select {
  min-width: 82px;
  border: 0;
  outline: 0;
  color: inherit;
  background: transparent;
  font: inherit;
}

.dashboard-segmented {
  display: inline-grid;
  height: 36px;
  grid-template-columns: 36px 36px;
  overflow: hidden;
  border: 1px solid #eae2d4;
  border-radius: 6px;
  background: #ffffff;
}

.dashboard-segmented button {
  display: grid;
  place-items: center;
  color: #84715d;
  background: transparent;
  cursor: pointer;
}

.dashboard-segmented button.active {
  color: #ffffff;
  background: #6f5840;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  grid-gap: 15px;
  gap: 15px;
}

.project-list {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.project-card {
  position: relative;
  display: grid;
  min-width: 0;
  padding: 10px;
  color: #573f26;
  background: #ffffff;
  border: 1px solid #ede5d7;
  border-radius: 8px;
  text-align: left;
  box-shadow: 0 1px 2px rgba(71, 52, 31, 0.05);
}

/* The trail through the store, and the two buttons beside it. The step you are
   standing on is disabled rather than hidden, so the row does not jump about as
   you walk in and out of folders. */
.store-trail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  /* The steps are buttons, so they carry padding for their hover pill. That
     padding would push the first one to the right of the heading above it -
     the negative margin pulls the row back onto the same left edge. */
  margin: 2px 0 0 -6px;
  font-size: 13px;
  font-weight: 700;
}

.store-trail button {
  padding: 2px 6px;
  color: #ad6206;
  background: transparent;
  border-radius: 5px;
  cursor: pointer;
}

.store-trail button:hover:not(:disabled) {
  background: #fbe8cc;
}

.store-trail button:disabled {
  color: #7a6650;
  cursor: default;
}

.store-trail .store-trail-separator {
  color: #c0ac93;
}

/* The line under a dialog's input that says why a name will not do. It sits
   in the flow rather than over the field, so nothing jumps when it appears.
   Two classes, because the label around it sets both colour and weight. */
.dashboard-rename-dialog .dashboard-dialog-problem {
  margin: 0;
  color: #a33a12;
  font-size: 13px;
  font-weight: 600;
}

/* The folder that stands for the server, sitting among the cards that stand
   for this browser. Same frame and same size as a project card, so the row
   reads as one shelf - only the contents of the picture area differ. */
.server-folder-preview {
  display: grid;
  place-items: center;
  color: #b07a2e;
  background: #fdf3e2;
  border: 1px dashed #e8c79a;
}

/* The icon is sized by the card, not by a fixed pixel value, so it keeps
   filling the tile at every column width the grid settles on. The nudge is
   for the eye, not the ruler: the raised tab sits on the left, so a folder
   centred to the pixel reads as if it had slipped that way. */
.server-folder-preview svg {
  width: 58%;
  height: auto;
  transform: translateX(2.5%);
}

/* The way back is a folder card, but a quieter one: dashed like the others,
   without the nudge the closed folder needs, and its title is two dots. */
.store-parent-card .server-folder-preview svg {
  width: 44%;
  transform: none;
}

.store-parent-card .project-card-title {
  letter-spacing: 0.12em;
}

.server-folder-card .project-card-open:hover .server-folder-preview {
  color: #9a5a06;
  background: #fbe8cc;
  border-color: #ad6206;
}

/* Dragging a project into a folder. The card being carried fades, and whatever
   sits under the pointer - a folder card or a step of the trail - lights up in
   the same amber, so both kinds of target read as one idea. */
.shared-project-card[draggable="true"] {
  cursor: -webkit-grab;
  cursor: grab;
}

.shared-project-card.dragging {
  opacity: 0.45;
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.project-card.drop-target {
  border-color: #ad6206;
  box-shadow: 0 0 0 2px rgba(173, 98, 6, 0.28);
}

.project-card.drop-target .server-folder-preview {
  color: #9a5a06;
  background: #fbe8cc;
  border-color: #ad6206;
}

.store-trail button.drop-target:not(:disabled) {
  color: #9a5a06;
  background: #fbe8cc;
  box-shadow: inset 0 0 0 1px #ad6206;
}

.project-list .project-card {
  padding-right: 50px;
}

.project-card-open {
  display: grid;
  min-width: 0;
  grid-template-rows: auto auto auto;
  grid-gap: 9px;
  gap: 9px;
  padding: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.project-list .project-card-open {
  grid-template-columns: 126px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
}

.project-card.is-opening {
  pointer-events: none;
}

.project-card.is-opening .project-card-open {
  cursor: wait;
}

.project-preview {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 6px;
  background: #f8f5ef;
}

.project-preview.is-loading .project-thumbnail-image {
  opacity: 0.35;
  filter: grayscale(40%);
}

.project-preview-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.38);
  color: #ffffff;
  -webkit-backdrop-filter: blur(1.5px);
          backdrop-filter: blur(1.5px);
  z-index: 2;
  border-radius: inherit;
}

.project-preview-spinner {
  animation: project-preview-spin 0.8s linear infinite;
}

@keyframes project-preview-spin {
  to { transform: rotate(360deg); }
}

.project-list .project-preview {
  grid-row: 1 / span 2;
}

.project-menu-trigger {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #83715e;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #eae2d5;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.92;
  box-shadow: 0 2px 6px rgba(60, 43, 24, 0.1);
}

.project-card:hover .project-menu-trigger,
.project-menu-trigger:focus-visible {
  opacity: 1;
}

.project-menu-trigger:hover,
.project-menu-trigger[aria-expanded="true"] {
  color: #6b4926;
  border-color: #b59c83;
  background: #fbf9f6;
}

/* A card lifts itself on hover with a transform, which makes it a stacking context of its own:
   its open menu then only counted inside that card, and the next card in the list was painted
   over it - the menu slipped behind the next row whenever the pointer was on its own card (#200).
   The card with an open menu stands in front of the others. */
.project-card:has(.project-card-menu) {
  z-index: 6;
}

.project-card-menu {
  position: absolute;
  top: 52px;
  right: 12px;
  z-index: 4;
  display: grid;
  width: 148px;
  grid-gap: 3px;
  gap: 3px;
  padding: 5px;
  color: #614931;
  background: #ffffff;
  border: 1px solid #dccebf;
  border-radius: 7px;
  box-shadow: 0 10px 28px rgba(60, 43, 24, 0.18);
}

.project-card-menu button {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 36px;
  padding: 0 10px;
  color: inherit;
  background: transparent;
  border-radius: 5px;
  font-weight: 700;
  text-align: left;
}

.project-card-menu button:hover,
.project-card-menu button:focus-visible {
  background: #f9f5ef;
}

.project-card-menu button.delete {
  color: #b01925;
}

.project-card-menu button.delete:hover,
.project-card-menu button.delete:focus-visible {
  background: #fff1f2;
}

.dashboard-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(52, 38, 23, 0.34);
}

.dashboard-confirm-dialog {
  width: min(420px, 100%);
  overflow: hidden;
  border: 1px solid #dccdbe;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 20px 55px rgba(67, 50, 31, 0.24);
}

.dashboard-confirm-dialog header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid #f4eee4;
}

.dashboard-confirm-dialog header strong {
  color: #48331d;
  font-size: 16px;
}

.dashboard-confirm-dialog header button {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  color: #8b7660;
  border: 1px solid #dccdbe;
  border-radius: 6px;
  background: #ffffff;
}

.dashboard-confirm-dialog p {
  margin: 0;
  padding: 18px;
  color: #6c5640;
  font-size: 14px;
  line-height: 1.45;
}

.dashboard-confirm-dialog p span {
  color: #48331d;
  font-weight: 600;
}

/* The destinations in the move dialog: one row each, like a menu, so the list
   grows downwards without the dialog having to guess a width. */
.store-move-targets {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  max-height: 260px;
  padding: 6px 12px;
  overflow-y: auto;
}

.store-move-targets button {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  color: #573f26;
  text-align: left;
  border-radius: 7px;
  cursor: pointer;
}

.store-move-targets button:hover,
.store-move-targets button:focus-visible {
  color: #9a5a06;
  background: #fbe8cc;
}

.store-move-targets svg {
  flex: none;
  color: #b07a2e;
}

.dashboard-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 18px 18px;
}

.dashboard-confirm-actions button {
  height: 38px;
  padding: 0 16px;
  font-weight: 600;
  border-radius: 6px;
}

.dashboard-confirm-cancel {
  color: #6c5640;
  border: 1px solid #dccdbe;
  background: #ffffff;
}

.dashboard-confirm-delete {
  color: #ffffff;
  border: 1px solid #c82031;
  background: #c82031;
}

.dashboard-confirm-save {
  color: #ffffff;
  border: 1px solid #a85f14;
  background: #a85f14;
}

.dashboard-confirm-save:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.dashboard-rename-dialog > label {
  display: grid;
  grid-gap: 7px;
  gap: 7px;
  padding: 18px;
  color: #6c5640;
  font-size: 13px;
  font-weight: 600;
}

.dashboard-rename-dialog input {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  color: #48331d;
  background: #ffffff;
  border: 1px solid #c1aa92;
  border-radius: 6px;
  font: inherit;
  font-weight: 600;
  outline: none;
}

.dashboard-rename-dialog input:focus {
  border-color: #b56614;
  box-shadow: 0 0 0 3px rgba(126, 72, 14, 0.14);
}

.project-empty {
  display: grid;
  min-height: 190px;
  place-items: center;
  align-content: center;
  grid-gap: 8px;
  gap: 8px;
  color: #96816a;
  background: #ffffff;
  border: 1px dashed #dccdbe;
  border-radius: 8px;
}

.project-empty strong {
  color: #573f26;
  font-size: 18px;
}

/* Present for search engines and screen readers, out of sight on screen. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.preview-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(173, 89, 0, 0.19) 1px, transparent 1px),
    linear-gradient(90deg, rgba(173, 89, 0, 0.19) 1px, transparent 1px);
  background-size: 18px 18px;
  transform: perspective(360px) rotateX(56deg) translateY(20px) scale(1.3);
  transform-origin: 50% 100%;
}

.project-thumbnail-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.preview-empty-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  color: #96816a;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.project-preview.accent-cyan {
  background: #f7f3ed;
}

.project-preview.accent-green {
  background: #e9f7ef;
}

.project-preview.accent-gold {
  background: #fff6df;
}

.project-preview.accent-red {
  background: #fff0f0;
}

.project-card-title {
  min-width: 0;
  overflow: hidden;
  color: #573f26;
  font-size: 15px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-card-meta {
  min-width: 0;
  overflow: hidden;
  color: #96816a;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-card-meta-loading {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #c25e00;
  font-weight: 500;
}

/* Der Ordner eines Suchtreffers: eine Zeile unter der Kachel, die sagt, wo
   der Entwurf liegt - und die zugleich der Weg dorthin ist. Sie steht im
   Fluss unter der Kachel, damit nichts springt, wenn sie erscheint. */
.project-card-folder {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  margin-top: 8px;
  padding: 3px 7px;
  overflow: hidden;
  color: #ad6206;
  background: #fbf2e3;
  border: 1px solid #f0e2cb;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.project-card-folder span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-card-folder:hover,
.project-card-folder:focus-visible {
  color: #8a4b02;
  border-color: #d9b787;
  background: #fbe8cc;
}

.project-list .project-card-folder {
  margin-top: 6px;
}

/* Die Trefferzeile steht an der Stelle der Pfadzeile und wird wie sie
   gelesen - nur ist sie ein Satz und kein Weg. */
.store-search-line {
  margin-top: 3px;
}


@media (max-width: 860px) {
  .dashboard-topbar {
    grid-template-columns: 1fr auto;
    height: auto;
    padding: 8px 12px;
    gap: 10px 14px;
  }

  .dashboard-search {
    grid-column: 1 / -1;
  }

  .dashboard-actions-band {
    grid-template-columns: 1fr;
  }

  .dashboard-section-header {
    align-items: stretch;
    flex-direction: column;
  }

  .dashboard-controls {
    justify-content: flex-start;
  }
}

.layerling-editor {
  width: 100vw;
  height: 100vh;
  min-width: 320px;
  overflow: hidden;
  background: var(--background);
}

/* The working surface answers the finger, it is not a page of text (#524): on an iPad a long press that meets a word
   - in the menu it opens, in the toolbar, in the foot of the page - starts the system's text selection, and the
   touches that follow go to the selection and not to the program. Fields keep their text selectable. */
.layerling-editor {
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
  -webkit-touch-callout: none;
}

.layerling-editor :is(input, textarea, [contenteditable="true"], [contenteditable=""]) {
  -webkit-user-select: text;
  -moz-user-select: text;
       user-select: text;
}

.secondary-toolbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 19;
  height: var(--editor-toolbar-height);
  overflow: visible;
  background: var(--toolbar-bg);
  border-bottom: 1px solid var(--toolbar-edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 1px 2px rgba(72, 53, 32, 0.06);
}

.edge-modifier-panel {
  position: fixed;
  top: calc(var(--editor-toolbar-height) + 14px);
  right: 14px;
  z-index: 46;
  width: min(340px, calc(100vw - 28px));
  padding: 14px;
  color: #584027;
  background: rgba(254, 252, 250, 0.98);
  border: 1px solid #dacbbb;
  border-radius: 12px;
  box-shadow: 0 14px 38px rgba(74, 53, 30, 0.2);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}

.edge-modifier-header,
.edge-modifier-quick-actions,
.edge-modifier-footer,
.edge-modifier-check {
  display: flex;
  align-items: center;
}

/* What the CAD kernel will treat beyond the picked edges (#161). */
.edge-modifier-note {
  margin: -2px 0 0;
  padding: 7px 9px;
  border-radius: 6px;
  background: rgba(210, 112, 9, 0.1);
  color: #7a4a12;
  font-size: 12px;
  line-height: 1.4;
}

.edge-modifier-header {
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 11px;
  border-bottom: 1px solid #eee7da;
}

.edge-modifier-header strong,
.edge-modifier-header span {
  display: block;
}

/* The title bar moves the tool panel across the workplane. */
.edge-modifier-header.movable {
  cursor: -webkit-grab;
  cursor: grab;
  touch-action: none;
}

.edge-modifier-panel.moving,
.edge-modifier-panel.moving .edge-modifier-header.movable {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.edge-modifier-header strong {
  font-size: 16px;
}

.edge-modifier-header span {
  margin-top: 2px;
  color: #937e68;
  font-size: 11px;
}

.edge-modifier-header button {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: #7e6852;
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
}

.edge-modifier-header button:hover {
  background: #f5f0e7;
}

.edge-modifier-target {
  display: grid;
  grid-gap: 2px;
  gap: 2px;
  margin-top: 10px;
  padding: 8px 10px;
  color: #7e6953;
  background: #f8f4ed;
  border: 1px solid #ede5d6;
  border-radius: 7px;
}

.edge-modifier-target.grouped {
  color: #8a5217;
  background: #f8f4ed;
  border-color: #e5c7a8;
}

.edge-modifier-target strong {
  font-size: 12px;
}

.edge-modifier-target span {
  font-size: 10px;
  font-weight: 700;
}

.edge-modifier-selection-help {
  margin: 11px 0 8px;
  color: #867360;
  font-size: 11px;
  line-height: 1.35;
}

.edge-modifier-quick-actions {
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 12px;
}

.edge-modifier-quick-actions button,
.edge-modifier-footer button {
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid #d8c8b7;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.edge-modifier-quick-actions button {
  color: #6d5133;
  background: #fbf8f4;
}

/* The quick buttons answer the pointer and show which one made the edges picked now (#517). */
.edge-modifier-quick-actions button:hover:not(:disabled),
.edge-modifier-footer button:hover:not(:disabled) {
  background: #f3e7d8;
  border-color: #c9ae92;
}

.edge-modifier-footer .primary:hover:not(:disabled) {
  background: #b9620c;
}

.edge-modifier-quick-actions button.active {
  color: #9f5508;
  background: #fff1e0;
  border-color: #e08a2c;
}

.edge-modifier-quick-actions button:disabled {
  cursor: default;
  opacity: 0.55;
}

html[data-theme="dark"] .edge-modifier-quick-actions button:hover:not(:disabled),
html[data-theme="dark"] .edge-modifier-footer button:hover:not(:disabled) {
  background: #43331f;
  border-color: #7a6450;
}

html[data-theme="dark"] .edge-modifier-footer .primary:hover:not(:disabled) {
  background: #d98021;
}

html[data-theme="dark"] .edge-modifier-quick-actions button.active {
  color: #f3a452;
  background: #3a2c16;
  border-color: #b9741f;
}

.shell-opening-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 6px;
  gap: 6px;
  margin-top: 7px;
}

.shell-opening-options button {
  min-height: 30px;
  padding: 0 8px;
  color: #6d5133;
  font-size: 12px;
  font-weight: 700;
  background: #fbf8f4;
  border: 1px solid #d8c8b7;
  border-radius: 7px;
  cursor: pointer;
}

/* Five hole shapes: three to a row. */
.hole-pattern-panel .hole-pattern-forms {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.shell-opening-options button.active {
  color: #9f5508;
  background: #fff1e0;
  border-color: #e08a2c;
}

.shell-opening-options button:disabled {
  cursor: default;
  opacity: 0.6;
}

.shell-side-options {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.shell-closed-option {
  grid-template-columns: minmax(0, 1fr);
  margin-top: 6px;
}

.shell-openings-summary {
  display: block;
  margin-top: 6px;
  color: #8a7560;
  font-size: 12px;
  font-weight: 500;
}

html[data-theme="dark"] .shell-openings-summary {
  color: #a8957f;
}

.offset-copy {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-weight: 600;
}

.offset-copy input {
  flex: none;
  margin-top: 2px;
}

.edge-modifier-history-actions {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  margin-bottom: 12px;
  padding: 8px;
  background: #fff8ed;
  border: 1px solid #efd7ad;
  border-radius: 8px;
}

.edge-modifier-history-actions button {
  min-height: 31px;
  color: #7a4d13;
  background: white;
  border: 1px solid #e0bd80;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.edge-modifier-history-toggle,
.edge-modifier-history-item {
  display: flex;
  align-items: center;
  gap: 7px;
  text-align: left;
}

.edge-modifier-history-toggle {
  justify-content: center;
}

.edge-modifier-history-actions button:disabled {
  color: #b5a798;
  background: #f8f7f4;
  border-color: #e6dfd3;
  cursor: not-allowed;
}

.edge-modifier-history-actions span {
  color: #7a6851;
  font-size: 10px;
  line-height: 1.35;
}

.edge-modifier-history-list {
  display: grid;
  grid-gap: 5px;
  gap: 5px;
  max-height: 170px;
  overflow: auto;
}

.edge-modifier-history-hint {
  margin: 0 2px 2px;
  color: #7a6851;
  font-size: 10px;
  line-height: 1.35;
}

.edge-modifier-history-warning {
  color: #a3521a;
  font-weight: 700;
}

.edge-modifier-history-item {
  justify-content: flex-start;
  min-height: 42px;
  padding: 6px 8px;
}

.edge-modifier-history-row {
  display: flex;
  gap: 5px;
  align-items: stretch;
}

.edge-modifier-history-row .edge-modifier-history-item {
  flex: 1 1;
  min-width: 0;
}

.edge-modifier-history-edit {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 54px;
  padding: 4px 8px;
  color: #8e5112;
  background: #fffaf2;
  border: 1px solid #e4c7a9;
  border-radius: 8px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 600;
}

.edge-modifier-history-edit:hover {
  background: #f7f2ea;
}

.edge-modifier-history-item > span {
  display: grid;
  min-width: 0;
  grid-gap: 2px;
  gap: 2px;
}

.edge-modifier-history-item strong,
.edge-modifier-history-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.edge-modifier-history-item strong {
  color: #6d4310;
  font-size: 11px;
}

.edge-modifier-history-item small {
  color: #7a6851;
  font-size: 10px;
  font-weight: 700;
}

.edge-modifier-field {
  display: block;
  margin-top: 11px;
  color: #6e5841;
  font-size: 12px;
  font-weight: 700;
}

.edge-modifier-field select {
  height: 31px;
  color: #533d26;
  background: white;
  border: 1px solid #c4ad96;
  border-radius: 6px;
}

.edge-modifier-field select {
  width: 100%;
  margin-top: 5px;
  padding: 0 7px;
}

.edge-modifier-check {
  gap: 8px;
  margin-top: 12px;
  color: #6e5841;
  font-size: 12px;
  font-weight: 700;
}

.edge-modifier-check input {
  accent-color: #d07313;
}

.edge-modifier-error {
  margin-top: 12px;
  padding: 8px 9px;
  color: #9f2730;
  background: #fff0f1;
  border: 1px solid #efc4c8;
  border-radius: 7px;
  font-size: 11px;
  line-height: 1.35;
}

.edge-modifier-footer {
  justify-content: flex-end;
  gap: 8px;
  margin-top: 15px;
  padding-top: 12px;
  border-top: 1px solid #eee7da;
}

.edge-modifier-footer .secondary {
  color: #745e48;
  background: white;
}

.edge-modifier-footer .primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: white;
  background: #cc7011;
  border-color: #b35f07;
}

.edge-modifier-footer .primary:disabled {
  opacity: 0.48;
  cursor: default;
}

.edge-modifier-spinner {
  animation: edge-modifier-spin 0.8s linear infinite;
}

@keyframes edge-modifier-spin {
  to { transform: rotate(360deg); }
}

.split-panel {
  position: fixed;
  top: calc(var(--editor-toolbar-height) + 14px);
  right: 14px;
  z-index: 46;
  width: min(340px, calc(100vw - 28px));
  max-height: calc(100vh - var(--editor-toolbar-height) - 28px);
  padding: 14px;
  overflow-y: auto;
  color: #584027;
  background: rgba(254, 252, 250, 0.98);
  border: 1px solid #dacbbb;
  border-radius: 12px;
  box-shadow: 0 14px 38px rgba(74, 53, 30, 0.2);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}

.split-panel:focus-visible {
  outline: 2px solid #d07313;
  outline-offset: 2px;
}

.split-panel-header.movable {
  cursor: -webkit-grab;
  cursor: grab;
  touch-action: none;
}

.split-panel.moving,
.split-panel.moving .split-panel-header.movable {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.split-panel-header,
.split-panel-footer,
.split-position-control > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.split-panel-header {
  gap: 12px;
  padding-bottom: 11px;
  border-bottom: 1px solid #eee7da;
}

.split-panel-header strong,
.split-panel-header span {
  display: block;
}

.split-panel-header strong {
  font-size: 16px;
}

.split-panel-header span {
  margin-top: 2px;
  color: #937e68;
  font-size: 11px;
}

.split-panel-header button {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: #7e6852;
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
}

.split-panel-header button:hover {
  background: #f5f0e7;
}

.split-panel-target {
  display: grid;
  grid-gap: 2px;
  gap: 2px;
  margin-top: 10px;
  padding: 8px 10px;
  color: #7e6953;
  background: #f8f4ed;
  border: 1px solid #ede5d6;
  border-radius: 7px;
}

.split-panel-target strong {
  font-size: 12px;
}

.split-panel-target span,
.split-panel-help {
  font-size: 10px;
  line-height: 1.4;
}

.split-axis-control {
  margin: 13px 0 0;
  padding: 0;
  border: 0;
}

.split-axis-control legend,
.split-position-control > span > strong {
  margin-bottom: 6px;
  color: #6d5133;
  font-size: 11px;
  font-weight: 600;
}

.split-axis-control > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 6px;
  gap: 6px;
}

.split-axis-control button {
  min-height: 34px;
  color: #6d5133;
  background: #fbf8f4;
  border: 1px solid #d8c8b7;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}

.split-axis-control button.active {
  color: #fff;
  background: #cc7011;
  border-color: #b35f07;
}

.split-position-control {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  margin-top: 14px;
}

.split-position-value {
  display: flex;
  align-items: center;
  gap: 5px;
}

.split-position-value input {
  width: 86px;
  height: 30px;
  padding: 0 6px;
  color: #533d26;
  background: white;
  border: 1px solid #c4ad96;
  border-radius: 6px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  text-align: right;
}

.split-position-value small {
  min-width: 20px;
  color: #7e6852;
  font-size: 10px;
  font-weight: 600;
}

.split-position-pick {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-left: 2px;
  padding: 0;
  color: #6d5133;
  background: #fbf8f4;
  border: 1px solid #d8c8b7;
  border-radius: 6px;
  cursor: pointer;
}

.split-position-pick.active {
  color: #fff;
  background: #079bc6;
  border-color: #067fa3;
}

.split-position-pick:disabled {
  cursor: default;
  opacity: 0.5;
}

.split-position-control > input[type="range"] {
  width: 100%;
  accent-color: #d07313;
}

.split-panel-help {
  margin: 11px 0 0;
  color: #867360;
}

.split-panel-error {
  margin-top: 12px;
  padding: 8px 9px;
  color: #9f2730;
  background: #fff0f1;
  border: 1px solid #efc4c8;
  border-radius: 7px;
  font-size: 11px;
  line-height: 1.35;
}

.split-panel-footer {
  justify-content: flex-end;
  gap: 8px;
  margin-top: 15px;
  padding-top: 12px;
  border-top: 1px solid #eee7da;
}

.split-panel-footer button {
  display: inline-flex;
  min-height: 32px;
  padding: 0 11px;
  align-items: center;
  gap: 6px;
  border: 1px solid #d8c8b7;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.split-panel-footer .secondary {
  color: #745e48;
  background: white;
}

.split-panel-footer .primary {
  color: white;
  background: #cc7011;
  border-color: #b35f07;
}

.split-panel-footer button:disabled,
.split-axis-control:disabled button {
  cursor: default;
  opacity: 0.5;
}

.split-panel-spinner {
  animation: edge-modifier-spin 0.8s linear infinite;
}

.workplane-wrap.split-mode .three-workplane-host {
  cursor: crosshair;
}

.workplane-wrap.split-mode.split-handle-hover .three-workplane-host {
  cursor: -webkit-grab;
  cursor: grab;
}

.workplane-wrap.split-mode.split-handle-drag .three-workplane-host {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

/* The blue plane under the pointer is the cursor while a face is picked. */
.workplane-wrap.split-mode.split-picking.split-pick-over-face .three-workplane-host {
  cursor: none;
}

.toolbar-mode-content {
  position: absolute;
  top: var(--editor-toolbar-title-height);
  right: 0;
  left: 0;
  display: flex;
  width: 100%;
  min-height: var(--editor-toolbar-tools-height);
  align-items: stretch;
  background: #faf7f3;
  border-top: 1px solid #e7dfd0;
}

.sketch-toolbar-ribbon {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: stretch;
  background: #faf7f3;
}

.sketch-create-section {
  min-width: 150px;
}

.sketch-edit-section {
  min-width: 150px;
}

.sketch-clipboard-section {
  min-width: 196px;
}

.sketch-history-section {
  min-width: 104px;
}

.sketch-start-section {
  min-width: 360px;
}

.sketch-finish-section {
  min-width: 190px;
}

.sketch-tool-icon svg {
  width: calc(30px * var(--toolbar-scale));
  height: calc(30px * var(--toolbar-scale));
  stroke-width: 1.8;
}

.sketch-tool-icon .sketch-reference-icon {
  width: calc(32px * var(--toolbar-scale));
  height: calc(32px * var(--toolbar-scale));
}

.sketch-reference-icon {
  --sketch-icon-offset-y: 0;
  --sketch-icon-scale: 1;
  display: block;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  opacity: 0.96;
  transform:
    translateY(var(--sketch-icon-offset-y))
    scale(var(--sketch-icon-scale));
  transition: filter 120ms ease, opacity 120ms ease;
}

.sketch-reference-icon[data-sketch-icon="line"],
.sketch-reference-icon[data-sketch-icon="erase"],
.sketch-reference-icon[data-sketch-icon="measure"],
.sketch-reference-icon[data-sketch-icon="select"] {
  --sketch-icon-scale: 0.94;
}

.sketch-reference-icon[data-sketch-icon="bezier"] {
  --sketch-icon-scale: 1.12;
}

.sketch-reference-icon[data-sketch-icon="smooth"] {
  --sketch-icon-scale: 1.16;
}

.sketch-reference-icon[data-sketch-icon="image"] {
  --sketch-icon-scale: 1.06;
}

.sketch-reference-icon[data-sketch-icon="refine"] {
  --sketch-icon-scale: 1.12;
}

.sketch-reference-icon[data-sketch-icon="sketchTo3d"],
.sketch-reference-icon[data-sketch-icon="editSketchTo3d"] {
  --sketch-icon-scale: 1.08;
}

.sketch-reference-icon[data-sketch-icon="sketchTo3d"] {
  --sketch-icon-scale: 1.08;
}

.sketch-command-button {
  display: inline-flex;
  height: calc(43px * var(--toolbar-scale));
  min-width: 80px;
  padding: 3px 9px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  color: #6a5239;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 600;
}

.sketch-command-button svg {
  width: calc(25px * var(--toolbar-scale));
  height: calc(25px * var(--toolbar-scale));
  stroke-width: 1.8;
}

.sketch-command-button .sketch-reference-icon {
  width: calc(27px * var(--toolbar-scale));
  height: calc(27px * var(--toolbar-scale));
}

.sketch-command-button:hover:not(:disabled) {
  color: #5d3b17;
  background: #f7f3eb;
  border-color: #e3c8ad;
}

.sketch-command-button.primary {
  color: #8e5112;
}

.sketch-command-button.cancel {
  color: #835059;
}

/* The stroke is on, or its panel is open (#154). */
.sketch-command-button.active {
  color: #5d3b17;
  background: #f3e3cf;
  border-color: #d9a978;
}

.sketch-command-button.disabled,
.sketch-command-button:disabled {
  opacity: 0.32;
  cursor: default;
}

.toolbar-icon.disabled .sketch-reference-icon,
.toolbar-icon:disabled .sketch-reference-icon,
.sketch-command-button.disabled .sketch-reference-icon,
.sketch-command-button:disabled .sketch-reference-icon {
  filter: grayscale(1) brightness(1.25);
  opacity: 0.34;
}

.toolbar-icon:not(.disabled):hover .sketch-reference-icon,
.sketch-command-button:hover:not(:disabled) .sketch-reference-icon {
  filter: contrast(1.08) brightness(0.95);
  opacity: 1;
}

.toolbar-icon.active .sketch-reference-icon {
  filter: contrast(1.12) brightness(0.9) drop-shadow(0 0 5px rgba(161, 83, 0, 0.28));
  opacity: 1;
}

.toolbar-title-row {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 2;
  display: flex;
  height: var(--editor-toolbar-title-height);
  align-items: stretch;
}

/* The brand lockup, sized down for the editor's title row but set the same
   way as on the start page: mark, name, claim beneath the name. */
.toolbar-brand {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 9px;
  padding: 0 14px 0 12px;
  margin-right: 2px;
  border-right: 1px solid var(--toolbar-edge);
}

.toolbar-brand img {
  display: block;
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.toolbar-brand-text {
  display: grid;
  min-width: 0;
  grid-gap: 0;
  gap: 0;
}

.toolbar-brand-name {
  color: #231a11;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.15;
}

.toolbar-brand-tagline {
  color: #7a6650;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
}

/* A narrow editor window needs the width for the tools, not the claim. */
@media (max-width: 1100px) {
  .toolbar-brand-tagline {
    display: none;
  }
}

/* Back to the start page, before the tabs (Stefan, 29.10.2026). */
.toolbar-title-home {
  display: grid;
  flex: 0 0 auto;
  width: 44px;
  margin-left: 6px;
  place-items: center;
  color: #634729;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.toolbar-title-home svg {
  width: 30px;
  height: 30px;
}

.toolbar-title-home:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.58);
}

.toolbar-title-home:disabled {
  cursor: default;
  opacity: 0.35;
}

/* The pin that keeps every group of the ribbon open, as it was before the groups learned to fold (Stefan, 29.10.2026). */
.toolbar-ribbon-pin {
  display: grid;
  width: 30px;
  height: 30px;
  margin-right: -2px;
  place-items: center;
  color: #a58c6c;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.toolbar-ribbon-pin:hover {
  color: #634729;
  background: rgba(255, 255, 255, 0.58);
}

.toolbar-ribbon-pin.active {
  color: #d07415;
}

html[data-theme="dark"] .toolbar-ribbon-pin:hover {
  color: #f7f2ea;
  background: #463727;
}

/* The help in the title row: its four buttons framed in the help colour, as the group was in the ribbon, without its name
   (that read as a button). All four in the brown of the title row - the search and the question mark were near-black
   beside the guide and the keyboard (Stefan, 29.10.2026). */
.toolbar-title-help {
  --group-color: var(--group-help);
  display: flex;
  height: 34px;
  margin-right: 8px;
  padding: 0 4px;
  align-items: center;
  gap: 2px;
  background: color-mix(in srgb, var(--group-color) 7%, var(--toolbar-tile));
  border: 2px solid var(--group-color);
  border-radius: 10px;
}

.toolbar-title-help .action-icon-button {
  width: 30px;
  height: 28px;
  color: #634729;
}

.toolbar-title-help .action-icon-button .toolbar-search-icon,
.toolbar-title-help .action-icon-button .toolbar-vector-art-icon {
  color: inherit;
}

.toolbar-title-help .action-icon-button:hover,
.toolbar-title-help .action-icon-button.active {
  color: var(--group-color);
}

html[data-theme="dark"] .toolbar-title-help .action-icon-button {
  color: #e3d3c0;
}

html[data-theme="dark"] .toolbar-title-help .action-icon-button:hover,
html[data-theme="dark"] .toolbar-title-help .action-icon-button.active {
  color: #f7f2ea;
}

/* On a narrow window - a tablet held upright - the name of the design needs the room: the colour scheme keeps its
   palette only. */
@media (max-width: 1100px) {
  .toolbar-title-row-actions .theme-switch:not(.language-switch) .theme-switch-label {
    display: none;
  }

  .toolbar-workspace-tabs button {
    padding-inline: 12px;
  }
}

.toolbar-title-help .action-icon-button svg {
  width: 22px;
  height: 22px;
}

.toolbar-workspace-tabs {
  display: flex;
  width: max-content;
  height: 100%;
  margin-left: 10px;
  flex: 0 0 auto;
  align-items: stretch;
}

.toolbar-workspace-tabs button {
  flex: 0 0 auto;
  min-width: 0;
  padding: 0 18px;
  color: #897560;
  background: transparent;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.toolbar-workspace-tabs button:hover {
  color: #634729;
  background: rgba(255, 255, 255, 0.58);
}

.toolbar-workspace-tabs button.active {
  color: #684826;
  background: rgba(255, 255, 255, 0.8);
  border-bottom-color: #d07415;
}

.tool-group {
  display: flex;
  height: var(--editor-toolbar-tools-height);
}

.toolbar-section {
  position: relative;
  display: flex;
  min-width: 88px;
  height: var(--editor-toolbar-tools-height);
  flex-direction: column;
  justify-content: flex-start;
  border-right: 0;
  background: transparent;
}

/* The group key colour, carried by the label and the underline beneath the tools. */
.toolbar-section {
  --group-color: var(--group-neutral);
}

.toolbar-section[data-group="home"] { --group-color: var(--group-home); }
.toolbar-section[data-group="clipboard"] { --group-color: var(--group-clipboard); }
.toolbar-section[data-group="history"] { --group-color: var(--group-history); }
.toolbar-section[data-group="shapes"] { --group-color: var(--group-shapes); }
.toolbar-section[data-group="visibility"] { --group-color: var(--group-visibility); }
.toolbar-section[data-group="combine"] { --group-color: var(--group-combine); }
.toolbar-section[data-group="modify"] { --group-color: var(--group-modify); }
.toolbar-section[data-group="arrange"] { --group-color: var(--group-arrange); }
.toolbar-section[data-group="manage"] { --group-color: var(--group-manage); }
.toolbar-section[data-group="help"] { --group-color: var(--group-help); }
.toolbar-section[data-group="draw"],
.toolbar-section[data-group="select"],
.toolbar-section[data-group="finish"],
.toolbar-section[data-group="create"] { --group-color: var(--group-sketch); }

.tool-group .toolbar-section:last-child {
  border-right: 0;
}

.toolbar-section.compact {
  min-width: 78px;
}

.toolbar-visibility-section {
  min-width: 92px;
}

.visibility-dropdown {
  position: fixed;
  z-index: 70;
  width: min(276px, calc(100vw - 24px));
  padding: 8px;
  color: #563e26;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid #dcccbc;
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(66, 48, 29, 0.22);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}

.visibility-dropdown-action {
  display: grid;
  width: 100%;
  min-height: 42px;
  padding: 9px 10px;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  grid-gap: 9px;
  gap: 9px;
  color: #563e26;
  text-align: left;
  background: #f9f6f1;
  border: 1px solid #e7d1ba;
  border-radius: 7px;
  cursor: pointer;
}

.visibility-dropdown-action:hover:not(:disabled),
.visibility-dropdown-action:focus-visible {
  color: #5a3712;
  background: #f5f0e8;
  border-color: #d4a06a;
  outline: none;
}

.visibility-dropdown-action:disabled {
  color: #806e5c;
  background: #f9f6f2;
  border-color: #ede6da;
  cursor: default;
}

.visibility-dropdown-action strong {
  font-size: 12px;
  font-weight: 600;
}

.visibility-dropdown-help {
  display: flex;
  padding: 7px 8px 1px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #84715d;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
}

.visibility-dropdown-help kbd {
  padding: 1px 3px;
  color: #5f4529;
  background: #f6f3ed;
  border: 1px solid #dacfc2;
  border-bottom-width: 2px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 8px;
  font-weight: 600;
}

.toolbar-section-label {
  order: 1;
  height: 24px;
  padding: 6px 9px 0;
  color: var(--group-color);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 16px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.86);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.toolbar-section-tools {
  order: 2;
  position: relative;
  display: flex;
  /* The row below the 24px label. */
  height: calc(var(--editor-toolbar-tools-height) - 24px);
  align-items: center;
  justify-content: center;
  padding: 0 3px 1px;
}

.toolbar-section-tools {
  margin: 0 5px 6px;
  padding: 0 4px;
  background: color-mix(in srgb, var(--group-color) 7%, var(--toolbar-tile));
  border: 2px solid var(--group-color);
  border-radius: 11px;
}

/* "Modify" is cut into named sections (MODIFY_SECTIONS, Stefan 31.10.2026): a fine line in the group's colour between
   them, and each section's name in the label row above it instead of the group's, which stays on the folded button. */
.toolbar-subgroup {
  position: relative;
  display: flex;
  align-self: stretch;
  align-items: center;
}

.toolbar-subgroup + .toolbar-subgroup {
  margin-left: 4px;
  padding-left: 5px;
}

.toolbar-subgroup + .toolbar-subgroup::before {
  position: absolute;
  top: 7px;
  bottom: 7px;
  left: 0;
  width: 1px;
  content: "";
  background: color-mix(in srgb, var(--group-color) 55%, transparent);
}

.toolbar-subgroup-label {
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  color: var(--group-color);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.86);
  transform: translateX(-50%);
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.toolbar-section:not([data-collapsed]):has(.toolbar-subgroup-label) > .toolbar-section-label {
  visibility: hidden;
}

/* Opened from the folded button, the tools hang below it: the section names go inside, above their tools. */
.toolbar-section[data-collapsed][data-open] > .toolbar-section-tools:not(.toolbar-collapse-box):has(.toolbar-subgroup) {
  padding-top: 18px;
}

.toolbar-section[data-collapsed][data-open] .toolbar-subgroup-label {
  bottom: auto;
  top: -16px;
}

/* A group the window has no room for folds into one button under its name (useToolbarCollapse, Stefan 29.10.2026):
   resting the pointer on it, or a tap, opens its tools beneath it, over the workplane. */
.toolbar-collapse-box {
  display: none;
}

.toolbar-section[data-collapsed] {
  width: 64px;
  min-width: 64px;
}

.toolbar-section[data-collapsed] > .toolbar-section-label {
  overflow: hidden;
  padding-inline: 3px;
  text-overflow: ellipsis;
}

.toolbar-section[data-collapsed] > .toolbar-collapse-box {
  display: flex;
}

.toolbar-section[data-collapsed] > .toolbar-section-tools:not(.toolbar-collapse-box),
.toolbar-section[data-collapsed] > .action-buttons {
  display: none;
}

.toolbar-collapse-trigger {
  position: relative;
}

/* A tab with a chevron under the folded button, in the group's colour, so it does not pass for one tool but reads as a
   menu that opens (Stefan 30.10.2026); it turns up while the group is open. */
.toolbar-section[data-collapsed] .toolbar-collapse-trigger::before {
  position: absolute;
  bottom: -10px;
  left: 50%;
  width: 18px;
  height: 11px;
  content: "";
  background-color: var(--group-color);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 11'%3E%3Cpath d='M5.5 3.5 9 7l3.5-3.5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-radius: 0 0 6px 6px;
  transform: translateX(-50%);
  transition: transform 0.15s ease;
}

.toolbar-section[data-collapsed][data-open] .toolbar-collapse-trigger::before {
  transform: translateX(-50%) scaleY(-1);
}

/* What the tools would show at a glance - something hidden, files attached - shows on the folded button as a dot. */
.toolbar-section[data-collapsed]:has(.visibility-hidden-badge, .attachments-indicator) .toolbar-collapse-trigger::after {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 8px;
  height: 8px;
  content: "";
  background: var(--group-color);
  border: 1.5px solid var(--toolbar-tile);
  border-radius: 50%;
}

.toolbar-section[data-collapsed][data-open] > .toolbar-section-tools:not(.toolbar-collapse-box),
.toolbar-section[data-collapsed][data-open] > .action-buttons {
  position: absolute;
  top: calc(var(--editor-toolbar-tools-height) - 8px);
  left: 0;
  z-index: 70;
  display: flex;
  width: max-content;
  height: auto;
  min-height: calc(var(--editor-toolbar-tools-height) - 24px);
  margin: 0;
  padding: 4px 6px;
  background: color-mix(in srgb, var(--group-color) 7%, var(--toolbar-tile));
  border: 2px solid var(--group-color);
  border-radius: 11px;
  box-shadow: 0 14px 34px rgba(66, 48, 29, 0.22);
}

.toolbar-section[data-collapsed][data-open="end"] > .toolbar-section-tools:not(.toolbar-collapse-box),
.toolbar-section[data-collapsed][data-open="end"] > .action-buttons {
  right: 0;
  left: auto;
}

.toolbar-spacer {
  display: none;
}

.toolbar-project-name {
  display: flex;
  min-width: 0;
  height: 100%;
  flex: 1 1;
  padding: 0 16px 7px;
  align-items: center;
  /* Sits directly beside the Sketch tab rather than centred over the toolbar. */
  justify-content: flex-start;
}

/* A bordered field rather than an underline: the name is editable at any
   time, and an underline alone reads as a heading. */
.toolbar-project-name-field {
  position: relative;
  display: flex;
  width: min(360px, 100%);
  padding: 0;
  align-items: center;
  justify-content: flex-start;
  background: transparent;
  cursor: text;
}

.toolbar-project-name-field input {
  min-width: 0;
  width: 100%;
  height: 30px;
  padding: 0 30px 0 10px;
  color: #634729;
  font: 600 14px/1.1 Arial, Helvetica, sans-serif;
  text-align: left;
  text-overflow: ellipsis;
  background: #fffdf8;
  border: 1px solid #e2d4bf;
  border-radius: 6px;
  outline: 0;
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.toolbar-project-name-field svg {
  position: absolute;
  right: 9px;
  color: #a58c6c;
  pointer-events: none;
}

.toolbar-project-name-field:hover input {
  border-color: #d07415;
}

.toolbar-project-name-field input:focus {
  background: #ffffff;
  border-color: #d07415;
  box-shadow: 0 0 0 3px rgba(221, 121, 6, 0.16);
}

.toolbar-project-name-field:hover svg,
.toolbar-project-name-field input:focus + svg {
  color: #d07415;
}

.toolbar-icon {
  display: grid;
  width: var(--toolbar-icon-size);
  height: var(--toolbar-icon-size);
  place-items: center;
  color: var(--group-color, var(--toolbar-icon));
  background: transparent;
  border-radius: 3px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.toolbar-icon.disabled {
  color: var(--toolbar-icon-disabled);
  cursor: default;
  opacity: 1;
}

.toolbar-icon:disabled {
  pointer-events: none;
}

.toolbar-icon:not(.disabled):hover {
  background: var(--toolbar-hover-bg);
  box-shadow: inset 0 0 0 1px var(--toolbar-hover-ring);
  color: var(--toolbar-icon);
}

/* A Lucide icon among the tools takes the dark of the drawn icons beside it, not the group colour the button carries:
   Flexi joints, Cookie cutter and Lid stood out orange among the Modify tools as if they were on (Stefan, 29.10.2026). */
.toolbar-icon:not(.disabled):not(.active) > svg.lucide {
  color: var(--toolbar-icon);
}

/* An armed tool lights up in the colour of the group it belongs to. */
.toolbar-icon.active {
  background: var(--group-color);
  box-shadow: none;
  color: #ffffff;
}

.toolbar-icon.active .toolbar-sprite-icon,
.toolbar-icon.active .vector-toolbar-sprite-icon {
  filter: brightness(0) invert(1);
  opacity: 1;
}

.toolbar-icon svg,
.toolbar-icon .toolbar-sprite-icon,
.toolbar-icon .vector-toolbar-sprite-icon {
  width: var(--toolbar-icon-size);
  height: var(--toolbar-icon-size);
}

/* Drawn toolbar art carries its own colour, so a vector icon next to it has to
   stay just as solid instead of inheriting the muted button colour, which reads
   as a disabled control. */
.toolbar-vector-art-icon {
  width: var(--toolbar-icon-size);
  height: var(--toolbar-icon-size);
}

/* Manage draws its buttons with .action-buttons, so it needs the group tile
   spelled out rather than inherited from .toolbar-section-tools. */
.toolbar-section .action-buttons {
  margin: 0 5px 6px;
  padding: 0 6px;
  background: color-mix(in srgb, var(--group-color) 7%, var(--toolbar-tile));
  border: 2px solid var(--group-color);
  border-radius: 11px;
}

.inspector-header-icon .toolbar-vector-art-icon,
.shape-menu-trigger .toolbar-vector-art-icon {
  width: 26px;
  height: 26px;
  color: var(--toolbar-icon);
}

/* The inspector header keeps its size; the ribbon follows the toolbar size. */
.shape-menu-trigger .toolbar-vector-art-icon {
  width: calc(26px * var(--toolbar-scale));
  height: calc(26px * var(--toolbar-scale));
}

/* Manage sits in the same ribbon as every other group, so its icons are drawn
   at the same size and in the same ink. They were inheriting the small size
   meant for the inspector header. */
.action-buttons .action-icon-button .toolbar-vector-art-icon {
  width: var(--toolbar-icon-size);
  height: var(--toolbar-icon-size);
  color: var(--toolbar-icon);
  opacity: 0.96;
  transition: opacity 120ms ease, color 120ms ease;
}

.action-buttons .action-icon-button:hover .toolbar-vector-art-icon {
  color: var(--group-color, var(--toolbar-icon));
  opacity: 1;
}

/* The ink is the theme's, not a literal: these marks are drawn in
   `currentColor`, and a fixed near-black left them invisible on the dark
   ground - most of all the disabled ones, whose whole group looked empty. */
.toolbar-icon .toolbar-vector-art-icon {
  color: var(--toolbar-icon);
  opacity: 0.96;
  transition: filter 120ms ease, opacity 120ms ease, color 120ms ease;
}

.toolbar-icon.disabled .toolbar-vector-art-icon {
  filter: grayscale(1) brightness(1.25);
  opacity: 0.22;
}

.toolbar-icon:not(.disabled):hover .toolbar-vector-art-icon {
  filter: contrast(1.08) brightness(0.94) drop-shadow(0 0 4px rgba(161, 83, 0, 0.3));
  opacity: 1;
}

.toolbar-sprite-icon {
  display: block;
  background-repeat: no-repeat;
  background-size: var(--sprite-width) var(--sprite-height);
  background-position: var(--sprite-x) var(--sprite-y);
  filter: grayscale(1) contrast(0.78) brightness(1.35);
  opacity: 0.22;
  transition: filter 120ms ease, opacity 120ms ease;
}

/* The sprite icons size themselves from this (components/icons.tsx); in the
   ribbon they follow the toolbar size setting. */
.toolbar-mode-content {
  --sprite-icon-size: calc(35px * var(--toolbar-scale));
}

.vector-toolbar-sprite-icon {
  display: block;
  flex: 0 0 auto;
  background-repeat: no-repeat;
  background-size: var(--vector-sprite-width) var(--vector-sprite-height);
  background-position: var(--vector-sprite-x) var(--vector-sprite-y);
  filter: grayscale(1) contrast(0.78) brightness(1.35);
  opacity: 0.22;
  transition: filter 120ms ease, opacity 120ms ease;
}

.toolbar-icon.disabled .vector-toolbar-sprite-icon {
  opacity: 0.22;
}

.toolbar-icon:not(.disabled) .toolbar-sprite-icon,
.toolbar-icon:not(.disabled) .vector-toolbar-sprite-icon,
.shape-menu-trigger .vector-toolbar-sprite-icon,
.action-buttons button .vector-toolbar-sprite-icon,
.inspector-header-icon .vector-toolbar-sprite-icon {
  filter: grayscale(0.35) sepia(0.12) saturate(1.7) hue-rotate(165deg) contrast(1.18) brightness(0.78) drop-shadow(0 0 1px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 3px rgba(161, 83, 0, 0.2));
  opacity: 0.94;
}

.toolbar-icon:not(.disabled):hover .toolbar-sprite-icon,
.toolbar-icon:not(.disabled):hover .vector-toolbar-sprite-icon,
.shape-menu-trigger:hover .vector-toolbar-sprite-icon,
.shape-menu-trigger.active .vector-toolbar-sprite-icon,
.action-buttons button:hover .vector-toolbar-sprite-icon,
.inspector-header-icon:hover .vector-toolbar-sprite-icon {
  filter: grayscale(0.1) sepia(0.22) saturate(2.1) hue-rotate(164deg) contrast(1.2) brightness(0.72) drop-shadow(0 0 1px rgba(255, 255, 255, 1)) drop-shadow(0 0 5px rgba(161, 83, 0, 0.38));
  opacity: 1;
}

.toolbar-icon.active .toolbar-sprite-icon,
.toolbar-icon.active .vector-toolbar-sprite-icon,
.inspector-header-icon.active .vector-toolbar-sprite-icon {
  filter: grayscale(0.05) sepia(0.22) saturate(2.35) hue-rotate(164deg) contrast(1.2) brightness(0.7) drop-shadow(0 0 1px rgba(255, 255, 255, 1)) drop-shadow(0 0 5px rgba(161, 83, 0, 0.42));
  opacity: 1;
}

.action-buttons {
  order: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: calc(var(--editor-toolbar-tools-height) - 24px);
  padding: 0 6px 2px;
}

.toolbar-actions-section {
  flex: 0 0 auto;
  min-width: 0;
  border-inline: 0;
}

.toolbar-shapes-section {
  min-width: 82px;
}

.shape-menu-trigger {
  position: relative;
  display: grid;
  width: calc(var(--toolbar-icon-size) + 2px);
  height: var(--toolbar-icon-size);
  place-items: center;
  color: #573e24;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: background 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.shape-menu-trigger:hover,
.shape-menu-trigger.active {
  background: rgba(255, 255, 255, 0.66);
  border-color: transparent;
  box-shadow: inset 0 0 0 1px rgba(216, 201, 185, 0.86);
}

.shape-menu-trigger .vector-toolbar-sprite-icon {
  width: var(--toolbar-icon-size);
  height: var(--toolbar-icon-size);
}

.shape-menu-dropdown {
  position: absolute;
  top: var(--editor-toolbar-tools-height);
  left: 0;
  z-index: 60;
  /* Mehrspaltig, damit alle Formen ohne Rollen zu sehen sind. */
  width: min(672px, calc(100vw - 32px));
  max-height: min(650px, calc(100vh - 92px));
  overflow: hidden;
  color: #573f25;
  background: rgba(253, 252, 250, 0.98);
  border: 1px solid #ded0c2;
  border-radius: 4px;
  box-shadow: 0 14px 34px rgba(66, 47, 26, 0.22);
}

.shape-menu-title {
  height: 42px;
  padding: 0 15px;
  color: #604529;
  font-size: 16px;
  font-weight: 600;
  line-height: 42px;
  background: linear-gradient(180deg, #fff, #faf7f3);
  border-bottom: 1px solid #efe7d9;
}

.shape-menu-list {
  display: grid;
  max-height: min(608px, calc(100vh - 136px));
  grid-template-columns: repeat(auto-fill, minmax(206px, 1fr));
  align-content: start;
  grid-gap: 4px;
  gap: 4px;
  padding: 8px;
  overflow-y: auto;
}

.shape-menu-item {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: flex-start;
  gap: 11px;
  padding: 5px 10px 5px 7px;
  color: #5c442c;
  background: #fbfaf8;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  touch-action: manipulation;
  font-size: 14px;
  font-weight: 600;
  transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.shape-menu-item:hover {
  background: #fff;
  border-color: #dccdbe;
  box-shadow: 0 4px 12px rgba(68, 49, 28, 0.13);
  transform: translateY(-1px);
}

.shape-menu-item img {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  object-fit: contain;
  pointer-events: none;
}

.shape-menu-item .sketch-shape-menu-icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  padding: 5px;
  color: #7d6245;
  background: linear-gradient(145deg, #fff, #f6f1e8);
  border: 1px solid #ebe1cf;
  border-radius: 6px;
  stroke-width: 1.7;
  pointer-events: none;
}

/* Laengere Beschriftungen brechen um, statt am Rand abgeschnitten zu werden:
   hinter einem Eintrag koennen mehrere Bauteile stecken. */
.shape-menu-item span {
  min-width: 0;
  max-width: 150px;
  text-align: left;
  line-height: 1.22;
  overflow-wrap: anywhere;
  /* Zeilenumbrueche aus dem Katalog gelten; Leerraum wird trotzdem gefaltet. */
  white-space: pre-line;
}

/* One long word ("Schwalbenschwanz") cannot wrap; it gets a smaller size instead of breaking in the middle. */
.shape-menu-item span.long-word {
  font-size: 0.85em;
}

/* The colour a library entry lands in: its own, or the colour its kind saves in the shape defaults.
   The grey icon keeps its shading; a colour layer masked by the icon's outline multiplies over it. */
.shape-menu-item .shape-menu-thumb {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  max-width: none;
  isolation: isolate;
  pointer-events: none;
}

.shape-menu-item .shape-menu-thumb img {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.shape-menu-item .shape-menu-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--shape-default-color);
  -webkit-mask: var(--shape-icon) center / contain no-repeat;
  mask: var(--shape-icon) center / contain no-repeat;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* The setting "Shapes in colour" (lib/shapeColors.ts): off leaves the grey pictures. */
html[data-shape-colors="off"] .shape-menu-item .shape-menu-thumb::after {
  display: none;
}

/* Custom shapes above the basic shapes (#109). Both scroll together in the
   menu body, so the library list itself no longer scrolls on its own there. */
.shape-menu-body {
  max-height: min(608px, calc(100vh - 136px));
  overflow-y: auto;
}

.shape-menu-body .shape-menu-list {
  max-height: none;
  overflow: visible;
}

/* The 3D editor's shape menu follows the toolbar size setting; the sketch
   editor's menu (.sketch-shape-menu-dropdown) keeps its size. The browser
   zooms the whole menu - pictures, names, spacing. Zoom also multiplies the
   menu's own lengths, so everything measured from the window or the bar is
   divided by the scale to land where it did at medium. */
.shape-menu-dropdown:not(.sketch-shape-menu-dropdown) {
  /* Small menus fit more columns, large ones fewer: 5, 4, 3. The width holds
     that many 210px columns with their gaps, the list's padding and border,
     and room for the scrollbar. */
  --shape-menu-columns: 4;
  --shape-menu-width: calc(var(--shape-menu-columns) * 210px + (var(--shape-menu-columns) - 1) * 4px + 34px);
  zoom: var(--toolbar-scale);
  top: calc(var(--editor-toolbar-tools-height) / var(--toolbar-scale));
  width: min(var(--shape-menu-width), calc((100vw - 32px) / var(--toolbar-scale)));
  max-height: min(650px, calc((100vh - 92px) / var(--toolbar-scale)));
}

html[data-toolbar-size="small"] .shape-menu-dropdown:not(.sketch-shape-menu-dropdown) {
  --shape-menu-columns: 5;
}

html[data-toolbar-size="large"] .shape-menu-dropdown:not(.sketch-shape-menu-dropdown),
html[data-simple-mode="on"]:not([data-toolbar-size]) .shape-menu-dropdown:not(.sketch-shape-menu-dropdown) {
  --shape-menu-columns: 3;
}

.shape-menu-dropdown:not(.sketch-shape-menu-dropdown) .shape-menu-list {
  grid-template-columns: repeat(var(--shape-menu-columns), minmax(0, 1fr));
}

.shape-menu-dropdown:not(.sketch-shape-menu-dropdown) .shape-menu-list,
.shape-menu-dropdown:not(.sketch-shape-menu-dropdown) .shape-menu-body {
  max-height: min(608px, calc((100vh - 136px) / var(--toolbar-scale)));
}

.shape-menu-dropdown:not(.sketch-shape-menu-dropdown) .shape-menu-body .shape-menu-list {
  max-height: none;
}

/* The narrow window's menu hangs from the window below the bar (see the
   max-width: 1240px block further down); the same lengths, divided. */
@media (max-width: 1240px) {
  .shape-menu-dropdown:not(.sketch-shape-menu-dropdown) {
    top: calc(var(--editor-toolbar-height) / var(--toolbar-scale));
    left: calc(10px / var(--toolbar-scale));
    width: min(var(--shape-menu-width), calc((100vw - 20px) / var(--toolbar-scale)));
    max-height: calc((100vh - var(--editor-toolbar-height) - 10px) / var(--toolbar-scale));
    max-height: calc((100dvh - var(--editor-toolbar-height) - 10px) / var(--toolbar-scale));
  }

  .shape-menu-dropdown:not(.sketch-shape-menu-dropdown) .shape-menu-list,
  .shape-menu-dropdown:not(.sketch-shape-menu-dropdown) .shape-menu-body {
    max-height: none;
  }

  /* A narrow window may not hold all the columns: as many as fit, as before. */
  .shape-menu-dropdown:not(.sketch-shape-menu-dropdown) .shape-menu-list {
    grid-template-columns: repeat(auto-fill, minmax(206px, 1fr));
  }
}

/* A library pulled to its own size (#505). The width and height come from the title bar's edges and corners; the
   stylesheet's columns give way to as many as fit, and the list scrolls inside the height that was chosen. */
.shape-menu-dropdown.shape-menu-sized-width .shape-menu-list {
  /* A column needs 190 px, not 206: two columns then fit in the width of the Properties panel, so a pinned library takes
     no more of the screen than that panel does (#527). */
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

.shape-menu-dropdown.shape-menu-sized-height:not(.sketch-shape-menu-dropdown) .shape-menu-body,
.shape-menu-dropdown.shape-menu-sized-height.sketch-shape-menu-dropdown > .shape-menu-list {
  max-height: calc(var(--shape-menu-height) - 46px);
}

/* Narrow: only the pictures stay, as in Tinkercad. The name is in each tile's tooltip. */
.shape-menu-dropdown.shape-menu-icons-only .shape-menu-list {
  grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
  gap: 2px;
  padding: 6px;
}

.shape-menu-icons-only .shape-menu-item {
  justify-content: center;
  padding: 5px;
}

.shape-menu-icons-only .shape-menu-item > span:not(.my-shape-no-preview):not(.shape-menu-thumb) {
  display: none;
}

.shape-menu-icons-only .shape-menu-title {
  padding: 0 8px;
}

.shape-menu-icons-only .shape-menu-subtitle {
  padding-inline: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shape-menu-resize {
  position: absolute;
  z-index: 3;
  touch-action: none;
  background: transparent;
  transition: background 120ms ease;
}

.shape-menu-resize:hover,
.shape-menu-resize:focus-visible {
  background: rgba(217, 120, 19, 0.32);
  outline: none;
}

.shape-menu-resize-left,
.shape-menu-resize-right {
  top: 0;
  bottom: 0;
  width: 7px;
  cursor: ew-resize;
}

.shape-menu-resize-left {
  left: 0;
}

.shape-menu-resize-right {
  right: 0;
}

.shape-menu-resize-bottom {
  right: 0;
  bottom: 0;
  left: 0;
  height: 7px;
  cursor: ns-resize;
}

.shape-menu-resize-bottom-left,
.shape-menu-resize-bottom-right {
  bottom: 0;
  width: 14px;
  height: 14px;
}

.shape-menu-resize-bottom-left {
  left: 0;
  cursor: nesw-resize;
}

.shape-menu-resize-bottom-right {
  right: 0;
  cursor: nwse-resize;
}

.shape-menu-subtitle {
  padding: 8px 15px 0;
  color: #8a6d4c;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.action-buttons button {
  box-sizing: border-box;
  display: inline-flex;
  width: var(--toolbar-icon-size);
  height: var(--toolbar-icon-size);
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
  color: #573e24;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  text-transform: uppercase;
  box-shadow: none;
  transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.action-buttons button:hover {
  background: rgba(255, 255, 255, 0.66);
  border-color: transparent;
  box-shadow: inset 0 0 0 1px rgba(216, 201, 185, 0.86);
}

.action-buttons .action-icon-button {
  display: grid;
  width: var(--toolbar-icon-size);
  place-items: center;
  color: #573e24;
  text-transform: none;
}

.action-buttons button .vector-toolbar-sprite-icon {
  width: var(--toolbar-icon-size);
  height: var(--toolbar-icon-size);
}

.action-buttons .action-icon-button .vector-toolbar-sprite-icon {
  width: var(--toolbar-icon-size);
  height: var(--toolbar-icon-size);
}

.top-action-panel {
  position: fixed;
  top: calc(var(--editor-toolbar-height) + 8px);
  right: 18px;
  z-index: 44;
  width: 322px;
  color: #573f25;
  background: #fff;
  border: 1px solid #ded0c2;
  border-radius: 3px;
  box-shadow: 0 10px 30px rgba(68, 49, 28, 0.2);
}

.top-action-panel header {
  display: flex;
  height: 48px;
  align-items: center;
  justify-content: space-between;
  padding: 0 9px 0 14px;
  border-bottom: 1px solid #f0e8db;
}

.top-action-panel strong {
  font-size: 17px;
  font-weight: 600;
}

.top-action-panel header button {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  color: #78644f;
  background: transparent;
  cursor: pointer;
}

.top-action-panel header button:hover {
  background: #f9f6f1;
}

.top-action-heading {
  display: grid;
  grid-gap: 2px;
  gap: 2px;
}

.top-action-heading > span {
  color: #917e6b;
  font-size: 11px;
  font-weight: 700;
}

/* The icon tag window moves by its title bar like the tool panels. */
.icon-tag-panel header.movable {
  cursor: -webkit-grab;
  cursor: grab;
  touch-action: none;
}

.icon-tag-panel.moving,
.icon-tag-panel.moving header.movable {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

/* Moved down the work area, the panel is cut to the room left below it: its content scrolls
   then, so the export button at its foot stays reachable. */
.top-action-panel.floating {
  display: flex;
  flex-direction: column;
}

.top-action-panel.floating > .export-dialog-body,
.top-action-panel.floating > .top-action-body {
  min-height: 0;
  overflow-y: auto;
}

.top-action-panel.export-action-panel,
.top-action-panel.import-action-panel {
  width: min(440px, calc(100vw - 28px));
  overflow: hidden;
  border-color: #eae3d6;
  border-radius: 12px;
  box-shadow: 0 18px 55px rgba(55, 38, 19, 0.24);
}

.export-action-panel header,
.import-action-panel header {
  height: 52px;
  padding: 0 12px 0 15px;
  background: #fff;
}

.import-action-panel .top-action-body {
  padding: 14px;
  background: #fcfaf6;
}

.export-dialog-body {
  display: grid;
  /* One column that never grows past the window: a long file name in the footer made it as wide as the name (#563). */
  grid-template-columns: minmax(0, 1fr);
  max-height: calc(100vh - var(--editor-toolbar-height) - var(--editor-footer-height) - 96px);
  overflow-y: auto;
  background: #fcfaf6;
}

.export-setting-section {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  padding: 12px 14px;
  background: #fff;
  border-bottom: 1px solid #f1ece4;
}

.export-file-section {
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
}

.export-file-section label,
.export-section-heading strong {
  color: #4d3720;
  font-size: 13px;
  font-weight: 600;
}

.export-file-input-wrap {
  display: flex;
  min-width: 0;
  overflow: hidden;
  background: #fcfaf6;
  border: 1px solid #ebe4d7;
  border-radius: 6px;
}

.export-file-input-wrap:focus-within {
  background: #fff;
  border-color: #d07210;
  box-shadow: 0 0 0 2px rgba(151, 84, 12, 0.12);
}

.export-file-input {
  min-width: 0;
  flex: 1 1;
  height: 32px;
  padding: 0 2px 0 10px;
  color: #523c26;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  background: transparent;
  border: 0;
  outline: 0;
}

.export-file-input-wrap > span {
  display: inline-flex;
  flex: none;
  align-items: center;
  padding: 0 9px 0 4px;
  color: #937f6a;
  font-size: 11px;
  font-weight: 600;
  text-transform: lowercase;
}

.print-estimate-material {
  flex: none;
  height: 28px;
  padding: 0 6px;
  color: #523c26;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  background: #fcfaf6;
  border: 1px solid #ebe4d7;
  border-radius: 6px;
}

.print-estimate-calculate {
  justify-self: start;
  padding: 0 14px;
  cursor: pointer;
}

.print-estimate-settings {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.print-estimate-settings label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #96836f;
  font-size: 12px;
  font-weight: 700;
}

.print-estimate-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
  margin: 0;
}

.print-estimate-values > div {
  display: grid;
  grid-gap: 2px;
  gap: 2px;
}

.print-estimate-values dt,
.print-estimate-busy,
.print-estimate-note {
  color: #96836f;
  font-size: 11px;
  font-weight: 650;
}

/* The number is for a solid body, and a slicer's infill makes it much smaller: that is said in the open (Stefan, 14.10.2026). */
.print-estimate-infill {
  color: #7a6347;
  font-size: 12px;
  line-height: 1.4;
}

.print-estimate-values dd {
  margin: 0;
  color: #4d3720;
  font-size: 15px;
  font-weight: 600;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.export-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.export-section-heading > div {
  display: grid;
  grid-gap: 3px;
  gap: 3px;
}

.export-section-heading > div > span {
  color: #96836f;
  font-size: 11px;
  font-weight: 650;
}

.export-scope-badge {
  flex: none;
  padding: 4px 8px;
  color: #975613;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  background: #f8f5ef;
  border: 1px solid #ece2d0;
  border-radius: 999px;
}

.export-format-slider {
  position: relative;
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  height: 38px;
  padding: 3px;
  overflow: hidden;
  background: #f6f2ec;
  border: 1px solid #ede6d9;
  border-radius: 8px;
}

.export-format-slider::before {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc((100% - 6px) / 9);
  content: "";
  background: #fff;
  border: 1px solid #ddab78;
  border-radius: 6px;
  box-shadow: 0 2px 7px rgba(89, 59, 27, 0.12);
  transition: transform 180ms ease;
}

.export-format-slider[data-format="3mf"]::before {
  transform: translateX(100%);
}

.export-format-slider[data-format="obj"]::before {
  transform: translateX(200%);
}

.export-format-slider[data-format="step"]::before {
  transform: translateX(300%);
}

.export-format-slider[data-format="svg"]::before {
  transform: translateX(400%);
}

.export-format-slider[data-format="dxf"]::before {
  transform: translateX(500%);
}

.export-format-slider[data-format="png"]::before {
  transform: translateX(600%);
}

.export-format-slider[data-format="lyl"]::before {
  transform: translateX(700%);
}

.export-format-slider[data-format="drawing"]::before {
  transform: translateX(800%);
}

.export-format-slider button {
  position: relative;
  z-index: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 5px;
  color: #94816c;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  transition: color 160ms ease;
}

.export-format-slider button:hover {
  color: #6a4722;
}

.export-format-slider button[aria-checked="true"] {
  color: #9f5508;
}

@media (max-width: 480px) {
  .export-format-slider {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    height: auto;
    gap: 3px;
  }

  .export-format-slider::before {
    display: none;
  }

  .export-format-slider button {
    min-height: 32px;
    border: 1px solid transparent;
  }

  .export-format-slider button[aria-checked="true"] {
    background: #fff;
    border-color: #ddab78;
  }

  html[data-theme="dark"] .export-format-slider button[aria-checked="true"] {
    background: #473726;
    border-color: #986e43;
  }
}

.lyl-history-section {
  gap: 9px;
}

.lyl-history-range-control {
  position: relative;
  height: 26px;
}

.lyl-history-range-control::before,
.lyl-history-range-control::after {
  position: absolute;
  top: 10px;
  left: 9px;
  height: 6px;
  content: "";
  border-radius: 999px;
}

.lyl-history-range-control::before {
  right: 9px;
  background: #ede6d9;
  box-shadow: inset 0 1px 2px rgba(82, 62, 40, 0.12);
}

/* --stop is the position of the chosen stop, 0 to 1; the thumb sits 9px in from either end. */
.lyl-history-range-control::after {
  width: calc((100% - 18px) * var(--stop, 0));
  background: linear-gradient(90deg, #dc8122, #c16608);
  transition: width 140ms ease;
}

.lyl-history-range {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 26px;
  margin: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
  border: 0;
  cursor: -webkit-grab;
  cursor: grab;
}

.lyl-history-range:active {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.lyl-history-range:focus {
  outline: 0;
}

.lyl-history-range::-webkit-slider-runnable-track {
  height: 6px;
  background: transparent;
}

.lyl-history-range::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  margin-top: -6px;
  -webkit-appearance: none;
          appearance: none;
  background: #fff;
  border: 2px solid #ca6c0b;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(108, 66, 22, 0.25);
}

.lyl-history-range::-moz-range-track {
  height: 6px;
  background: transparent;
}

.lyl-history-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: #fff;
  border: 2px solid #ca6c0b;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(108, 66, 22, 0.25);
}

.lyl-history-range:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(144, 78, 8, 0.17), 0 2px 6px rgba(108, 66, 22, 0.25);
}

.lyl-history-range:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 4px rgba(144, 78, 8, 0.17), 0 2px 6px rgba(108, 66, 22, 0.25);
}

.lyl-history-range-labels {
  position: relative;
  height: 14px;
  margin-top: -3px;
}

.lyl-history-range-labels span {
  position: absolute;
  top: 0;
  left: calc(9px + (100% - 18px) * var(--stop, 0));
  color: #96836f;
  font-size: 10px;
  font-weight: 750;
  transform: translateX(-50%);
  transition: color 140ms ease;
}

.lyl-history-range-labels span:first-child {
  left: 0;
  transform: none;
}

.lyl-history-range-labels span:last-child {
  left: auto;
  right: 0;
  transform: none;
}

.lyl-history-range-labels span.active {
  color: #9f5508;
  font-weight: 600;
}

.export-format-summary {
  display: grid;
  grid-gap: 5px;
  gap: 5px;
  margin: 10px 14px;
  padding: 9px 11px;
  background: #f8f4ed;
  border: 1px solid #efe8db;
  border-radius: 7px;
}

.export-format-summary > div {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.export-format-summary strong {
  color: #52391f;
  font-size: 12px;
  font-weight: 600;
}

.export-format-summary span,
.export-format-summary p {
  margin: 0;
  color: #897662;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}

.export-dialog-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 10px 14px 12px;
  background: #fff;
  border-top: 1px solid #f0eae0;
}

.export-dialog-footer .export-linked-file {
  /* The file name has the row to itself, however long, and the buttons stand under it (#563). */
  flex: 1 1 100%;
  min-width: 0;
  color: #897662;
  font-size: 11px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.export-dialog-footer > div {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
}

.export-dialog-footer button {
  display: inline-flex;
  min-width: 78px;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 13px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}

.export-dialog-footer .export-primary-button {
  min-width: 118px;
  color: #fff;
  background: linear-gradient(180deg, #dc7a14, #c06608);
  border: 1px solid #af5d07;
  box-shadow: 0 5px 14px rgba(123, 65, 3, 0.22);
}

.export-dialog-footer .export-shared-button {
  min-width: 122px;
  color: #9f5508;
  background: #f9f7f2;
  border: 1px solid #ddab78;
}

.export-dialog-footer .export-shared-button:hover:not(:disabled) {
  color: #864706;
  background: #f6f1e8;
  border-color: #d0873c;
}

.export-dialog-footer .export-shared-button:disabled {
  cursor: default;
  opacity: 0.55;
}

.export-shared-button svg {
  width: 16px;
  height: 16px;
}

.export-dialog-footer .export-primary-button:hover:not(:disabled) {
  background: linear-gradient(180deg, #d4730e, #b05d07);
}

.export-dialog-footer .export-primary-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.export-primary-button svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 560px) {
  .top-action-panel.export-action-panel,
  .top-action-panel.import-action-panel {
    right: 10px;
    width: calc(100vw - 20px);
  }

  .export-file-section {
    grid-template-columns: 1fr;
  }

  .export-dialog-footer {
    align-items: flex-end;
  }
}

.top-action-body {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  padding: 13px;
}

.top-action-body p {
  margin: 0;
  color: #7c6751;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.top-action-body button {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
  color: #5a3917;
  background: #fcfaf7;
  border: 1px solid #ece4d6;
  border-radius: 3px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}

.top-action-body button:hover {
  background: #f9f6f1;
}

.top-action-body .open-lyl-project-button {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  min-height: 66px;
  justify-content: stretch;
  padding: 10px 12px;
  color: #5a3917;
  background: #fff;
  border-color: #ebe1cf;
  border-radius: 8px;
  text-align: left;
}

.open-lyl-project-button > span:last-child {
  display: grid;
  grid-gap: 3px;
  gap: 3px;
}

.open-lyl-project-button strong,
.open-lyl-project-button small {
  display: block;
}

.open-lyl-project-button small {
  color: #8e7a66;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}

.open-lyl-project-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #9f5508;
  background: #f8f5ef;
  border: 1px solid #ece2d0;
  border-radius: 8px;
}

.import-kind-divider {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #9c8b78;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.import-kind-divider::before,
.import-kind-divider::after {
  height: 1px;
  flex: 1 1;
  content: "";
  background: #efe8dd;
}

.top-action-body button svg,
.top-action-body button .vector-toolbar-sprite-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.top-action-body .import-drop-zone {
  display: grid;
  min-height: 132px;
  align-content: center;
  justify-items: center;
  grid-gap: 8px;
  gap: 8px;
  padding: 20px 14px;
  color: #573e24;
  background: #fff;
  border: 1.5px dashed #c2aa90;
  border-radius: 8px;
  text-align: center;
}

.top-action-body .import-drop-zone:hover {
  background: #fef3e7;
  border-color: rgba(166, 86, 0, 0.76);
  box-shadow: inset 0 0 0 1px rgba(166, 86, 0, 0.12), 0 4px 14px rgba(70, 51, 30, 0.1);
}

.import-option {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  color: #604529;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.import-option input {
  width: 16px;
  height: 16px;
  accent-color: #b3680f;
}

/* The width an SVG or a picture comes in at (#448): a number field, not a tick box. */
.import-option.import-width-option input {
  width: 6.5em;
  height: auto;
  padding: 4px 6px;
  border: 1px solid #d8c4a5;
  border-radius: 6px;
  background: #fffaf1;
  color: inherit;
  font: inherit;
  font-weight: 600;
}

html[data-theme="dark"] .import-option.import-width-option input {
  border-color: #5a4a36;
  background: #2a241c;
}

html[data-theme="dark"] .import-option {
  color: #f0e7d9;
}

.import-drop-zone svg {
  color: #573e24;
}

.import-drop-zone .vector-toolbar-sprite-icon {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.import-drop-zone strong {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
}

.import-drop-zone span {
  color: #8a7662;
  font-size: 12px;
  font-weight: 700;
}

.hidden-file-input {
  display: none;
}

/* Die Statuszeile sitzt in der Fusszeile, zwischen den Verweisen. Frueher war
   sie eine Einblendung ueber der Arbeitsflaeche - und stand dort in derselben
   Spalte wie die Kameraleiste, die auf einem flachen Fenster bis nach unten
   reicht. In einem Band, das ohnehin reserviert ist, kann sie nichts
   verdecken. */
.editor-status {
  /* Schwebt oben auf der Arbeitsflaeche, rechts neben dem Ansichtswuerfel:
     dort ist Platz, dort schaut man ohnehin hin, und dort steht nichts anderes.
     Im schmalen Band der Fusszeile war die Meldung kaum zu lesen. Sie erscheint
     nur, wenn es etwas zu sagen gibt - im Ruhezustand ist sie gar nicht da. */
  position: fixed;
  top: calc(var(--editor-toolbar-height) + 22px);
  left: 104px;
  z-index: 50;
  max-width: min(520px, calc(100vw - 400px));
  margin: 0;
  padding: 7px 14px;
  color: #5c442b;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  white-space: normal;
  word-break: break-word;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #ded0c2;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(68, 49, 28, 0.16);
  /* The pointer on it keeps it, and the cross closes it (#422). */
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

/* Die 400 px Abstand gelten der Einstellungstafel rechts. Auf einem schmalen
   Bildschirm blieben davon 20 px, und die Meldung lief Buchstabe fuer
   Buchstabe senkrecht hinunter; dort nimmt sie die Breite bis zum Rand. */
@media (max-width: 760px) {
  .editor-status {
    max-width: calc(100vw - 120px);
  }
}

.editor-status-text {
  min-width: 0;
}

/* The button a message may carry (#489): what can be done about it right away. */
.editor-status-action {
  flex: none;
  margin: 0 2px 0 4px;
  padding: 3px 10px;
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  background: #cf6a12;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.editor-status-action:hover,
.editor-status-action:focus-visible {
  background: #b45a0c;
}

/* The number of hidden shapes on the visibility button, so that it is seen without opening the menu (#489). */
.visibility-trigger-wrap {
  position: relative;
  display: inline-flex;
}

.visibility-hidden-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: 2;
  display: grid;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  place-items: center;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  background: #d9730d;
  border: 2px solid #fffaf2;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(60, 40, 10, 0.35);
  cursor: pointer;
}

.visibility-hidden-badge:hover,
.visibility-hidden-badge:focus-visible {
  background: #b45a0c;
}

html[data-theme="dark"] .visibility-hidden-badge {
  border-color: #2a2118;
}

.editor-status-close {
  display: grid;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  place-items: center;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.6;
}

.editor-status-close:hover,
.editor-status-close:focus-visible {
  background: rgba(127, 127, 127, 0.2);
  opacity: 1;
}

.editor-body {
  position: fixed;
  inset: var(--editor-toolbar-height) 0 var(--editor-footer-height) 0;
  display: flex;
  min-height: 0;
  background: var(--background);
}

/* The same row as on the start page, pinned under the workspace so it stays in
   view while modelling. The workspace above ends where this band begins - the
   two are laid out against the same variable, so the 3D view never hides
   behind it. */
.dashboard-legal.editor-legal {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  align-items: center;
  height: var(--editor-footer-height);
  margin-top: 0;
  padding: 0 18px;
  border-top: 1px solid var(--border);
  background: var(--subbar);
  font-size: 12px;
}

/* A band this shallow has no room for a second line, so the parts stay on one
   row and the long link gives way first. */
.dashboard-legal.editor-legal,
.dashboard-legal.editor-legal .dashboard-legal-group {
  flex-wrap: nowrap;
  min-width: 0;
}

.dashboard-legal.editor-legal .dashboard-legal-group a {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workplane-stage {
  position: relative;
  flex: 1 1;
  min-width: 0;
  height: calc(100vh - var(--editor-toolbar-height) - var(--editor-footer-height));
  overflow: hidden;
  background: var(--background);
  /* Fuer die Kameraleiste: Sie richtet sich nach der Hoehe dieser Flaeche,
     nicht nach der des Fensters. */
  container: workplane / size;
}

/* What an empty design says: where to start, and that Ctrl+K finds any tool. */
.workplane-empty-hint {
  position: absolute;
  left: 50%;
  bottom: 28px;
  z-index: 2;
  max-width: min(560px, calc(100% - 32px));
  margin: 0;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  transform: translateX(-50%);
  color: var(--foreground);
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
  pointer-events: none;
}

.sketch-workspace-stage {
  position: relative;
  flex: 1 1;
  min-width: 0;
  height: calc(100vh - var(--editor-toolbar-height) - var(--editor-footer-height));
  overflow: hidden;
  background: var(--sketch-bg, #fcfbf8);
}

.sketch-mode-badge {
  position: absolute;
  top: 8px;
  left: 50%;
  z-index: 9;
  padding: 4px 10px;
  color: #ffffff;
  background: #37a95b;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(25, 64, 43, 0.2);
  font-size: 11px;
  font-weight: 600;
  transform: translateX(-50%);
  pointer-events: none;
}

/* The badge picks what the sketch becomes (#655). */
.sketch-mode-badge.switchable {
  padding: 0;
  pointer-events: auto;
}

.sketch-mode-badge.switchable select {
  padding: 4px 24px 4px 10px;
  color: inherit;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 9px center;
  border: 0;
  border-radius: 12px;
  font: inherit;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.sketch-mode-badge.switchable select:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 1px;
}

.sketch-mode-badge.switchable option {
  color: #1f2a24;
  background: #ffffff;
}

.sketch-revolve-preview {
  position: absolute;
  top: 18px;
  right: 22px;
  z-index: 8;
  width: clamp(210px, 25vw, 330px);
  height: clamp(170px, 28vh, 270px);
  overflow: hidden;
  background: rgba(255, 239, 221, 0.96);
  border: 1px solid rgba(204, 186, 166, 0.9);
  border-radius: 12px;
  box-shadow: 0 12px 34px rgba(86, 61, 34, 0.16);
  pointer-events: none;
}

/* The preview's title carries the question mark beside it. */
.sketch-revolve-preview-title {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sketch-revolve-preview-title {
  position: absolute;
  top: 10px;
  left: 12px;
  z-index: 1;
  color: #7a6249;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* The title is the window's handle: a bar across the top of the picture that takes the press, the rest lets clicks through. */
.sketch-revolve-preview-title.movable {
  top: 0;
  right: 0;
  left: 0;
  padding: 10px 12px 8px;
  cursor: -webkit-grab;
  cursor: grab;
  touch-action: none;
  pointer-events: auto;
}

.sketch-revolve-preview.moving .sketch-revolve-preview-title.movable {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.sketch-revolve-preview canvas {
  display: block;
  width: 100%;
  height: 100%;
  /* The box lets clicks through; the picture itself is turned and zoomed with the mouse. */
  pointer-events: auto;
  cursor: -webkit-grab;
  cursor: grab;
  touch-action: none;
  background: radial-gradient(circle at 50% 48%, rgba(255, 239, 221, 0.98), rgba(238, 208, 176, 0.96));
}

.sketch-revolve-preview-reset {
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 1;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  padding: 0;
  color: #7a6249;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(204, 186, 166, 0.9);
  border-radius: 8px;
  cursor: pointer;
  pointer-events: auto;
}

.sketch-revolve-preview-reset:hover,
.sketch-revolve-preview-reset:focus-visible {
  background: rgba(255, 255, 255, 0.9);
}

html[data-theme="dark"] .sketch-revolve-preview-reset {
  color: #dfc5aa;
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(108, 81, 53, 0.8);
}

html[data-theme="dark"] .sketch-revolve-preview-reset:hover,
html[data-theme="dark"] .sketch-revolve-preview-reset:focus-visible {
  background: rgba(0, 0, 0, 0.5);
}

.sketch-revolve-preview canvas:active {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.sketch-revolve-preview-empty {
  display: grid;
  height: 100%;
  place-items: center;
  padding: 34px;
  color: #98846f;
  font-size: 13px;
  font-weight: 750;
  text-align: center;
}

.sketch-plate-wrap {
  position: absolute;
  inset: 14px 14px 0;
  display: block;
  overflow: hidden;
}

.sketch-plate {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: visible;
  touch-action: none;
  cursor: crosshair;
}

.sketch-plate.panning {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.sketch-plate.tool-select:not(.panning) {
  cursor: default;
}

.sketch-selection-marquee {
  fill: rgba(166, 86, 0, 0.1);
  stroke: rgba(166, 86, 0, 0.86);
  stroke-width: 1;
  stroke-dasharray: 4 3;
  vector-effect: non-scaling-stroke;
}

.sketch-primitive-source {
  cursor: -webkit-grab;
  cursor: grab;
}

.sketch-shape-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-gap: 8px 14px;
  gap: 8px 14px;
  padding: 10px 15px 12px;
  border-top: 1px solid #efe7d9;
}

.sketch-shape-options label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #604529;
  font: 700 13px/1.2 var(--font-ui);
}

.sketch-shape-options input {
  width: 58px;
  height: 28px;
  margin-left: auto;
  padding: 0 8px;
  color: #746352;
  font: 700 14px/1 var(--font-ui);
  text-align: right;
  background: #ffffff;
  border: 1px solid #daccbe;
  border-radius: 8px;
  outline: 0;
}

.sketch-shape-options input:focus {
  border-color: #ea953d;
  box-shadow: 0 0 0 3px rgba(161, 83, 0, 0.14);
}

.sketch-shape-options .unit {
  margin-left: -4px;
  color: #988672;
  font-size: 12px;
}

html[data-theme="dark"] .sketch-shape-options {
  border-color: #594a3a;
}

html[data-theme="dark"] .sketch-shape-options label {
  color: #f0e7d9;
}

html[data-theme="dark"] .sketch-shape-options input {
  color: #f0e7d9;
  background: #2a2018;
  border-color: #594a3a;
}

html[data-theme="dark"] .sketch-shape-options .unit {
  color: #b3a48d;
}

.sketch-primitive-source:active {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.sketch-geometry-selection-box {
  fill: rgba(123, 63, 0, 0.025);
  stroke: rgba(123, 63, 0, 0.82);
  stroke-width: 1;
  stroke-dasharray: 4 3;
  vector-effect: non-scaling-stroke;
  cursor: move;
}

.sketch-geometry-resize-handle {
  fill: #ffffff;
  stroke: rgba(123, 63, 0, 0.95);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.sketch-geometry-resize-handle.handle-nw,
.sketch-geometry-resize-handle.handle-se {
  cursor: nwse-resize;
}

.sketch-geometry-resize-handle.handle-ne,
.sketch-geometry-resize-handle.handle-sw {
  cursor: nesw-resize;
}

.sketch-geometry-resize-handle.handle-n,
.sketch-geometry-resize-handle.handle-s {
  cursor: ns-resize;
}

.sketch-geometry-resize-handle.handle-e,
.sketch-geometry-resize-handle.handle-w {
  cursor: ew-resize;
}

.sketch-geometry-dimension rect {
  fill: rgba(255, 255, 255, 0.98);
  stroke: rgba(123, 63, 0, 0.8);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 1px 2px rgba(76, 51, 25, 0.14));
}

.sketch-geometry-dimension text {
  fill: #5a3917;
  font-weight: 750;
  text-anchor: middle;
}

.sketch-plate-background {
  fill: var(--sketch-plate, #f5f0e7);
  stroke: none;
}

.sketch-plate-border {
  fill: none;
  stroke: #c97824;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.sketch-grid line {
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.sketch-grid .minor {
  stroke: var(--sketch-grid-minor, rgba(223, 136, 43, 0.46));
}

.sketch-grid .major {
  stroke: var(--sketch-grid-major, rgba(161, 102, 39, 0.68));
}

.sketch-grid .axis {
  stroke: var(--sketch-grid-axis, #b56817);
  stroke-width: 1.6;
}

.sketch-revolve-guide rect {
  fill: rgba(84, 53, 20, 0.12);
}

.sketch-revolve-guide line {
  stroke: #c838bc;
  stroke-width: 2.5;
  stroke-dasharray: 8 5;
  vector-effect: non-scaling-stroke;
}

.sketch-revolve-guide text {
  fill: #9e2996;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-anchor: end;
}

.sketch-reference-shapes rect,
.sketch-reference-shapes ellipse {
  fill: rgba(207, 142, 42, 0.22);
  stroke: rgba(188, 113, 18, 0.65);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}

.sketch-reference-shapes .sketch-reference-mesh-face {
  fill: rgba(207, 142, 42, 0.22);
  stroke: none;
}

.sketch-reference-shapes .sketch-reference-mesh-outline {
  fill: none;
  stroke: rgba(188, 113, 18, 0.7);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}

/* The parts seen through (#354): all their edges on the sketch plane, thin and faint, under the sketch. */
.sketch-reference-edges {
  fill: none;
  stroke: rgba(160, 98, 18, 0.6);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.sketch-profile-fills path {
  fill: rgba(199, 128, 52, 0.2);
  fill-rule: evenodd;
  stroke: none;
}

/* A stroked sketch fills only its line; the outline's own area stays faint (#154). */
.sketch-profile-fills.stroked path {
  fill: rgba(199, 128, 52, 0.06);
}

.sketch-stroke-preview {
  fill: rgba(199, 128, 52, 0.42);
  stroke: rgba(142, 81, 18, 0.7);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.sketch-stroke-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  cursor: pointer;
}

.sketch-stroke-toggle input {
  accent-color: #d27009;
  width: 16px;
  height: 16px;
}

.sketch-stroke-note {
  display: block;
  margin-top: 4px;
  color: #7a6e60;
  font-size: 11px;
  line-height: 1.35;
}

.sketch-segments path {
  fill: none;
  stroke: #603c17;
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
  pointer-events: stroke;
  cursor: pointer;
}

.sketch-segments path:hover,
.sketch-segments path.selected {
  stroke: #ff8a00;
  stroke-width: 4;
}

/* A construction line (#229): dashed and thinner, and never part of the body. */
.sketch-segments path.construction {
  stroke: #079bc6;
  stroke-width: 1.8;
  stroke-dasharray: 8 6;
}

.sketch-segments path.construction:hover,
.sketch-segments path.construction.selected {
  stroke: #ff8a00;
  stroke-width: 3;
}

.sketch-preview-line {
  stroke: #ce7416;
  stroke-width: 2;
  stroke-dasharray: 6 5;
  vector-effect: non-scaling-stroke;
}

/* The pointer has caught a corner of a body shown underneath (#189). */
.sketch-reference-snap {
  fill: none;
  stroke: #079bc6;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.sketch-drag-handles line,
.sketch-curve-handles line {
  stroke: #f08036;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.sketch-curve-handles circle.sketch-handle-selected {
  fill: #f08036;
  stroke: #ffffff;
  stroke-width: 3;
}

.sketch-drag-handles circle,
.sketch-curve-handles circle {
  fill: #ffffff;
  stroke: #f08036;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  cursor: move;
}

/* A Bezier handle (#1008) answers the pointer like a point: the hand, and lit up. Its wider ring catches near misses
   unseen, so the reference image under it is not grabbed instead. */
.sketch-curve-handles .sketch-curve-handle {
  cursor: pointer;
}

.sketch-curve-handles .sketch-curve-handle circle {
  cursor: pointer;
}

.sketch-curve-handles circle.sketch-curve-handle-hit {
  fill: transparent;
  stroke: none;
}

.sketch-curve-handles .sketch-curve-handle:hover circle:not(.sketch-curve-handle-hit):not(.sketch-handle-selected) {
  fill: #f08036;
}

.sketch-points circle {
  fill: #ffffff;
  stroke: #5c3914;
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
}

.sketch-points circle:hover,
.sketch-points circle.active {
  fill: #ea943a;
  stroke: #985108;
}

.sketch-points circle.selected {
  fill: #ffb24b;
  stroke: #9d4d00;
  stroke-width: 2;
}

.sketch-cursor-point {
  fill: #ce7416;
  stroke: #ffffff;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.sketch-segment-dimensions rect {
  fill: rgba(255, 255, 255, 0.94);
  stroke: rgba(235, 228, 220, 0.86);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.sketch-segment-dimensions text {
  fill: #3a2816;
  font-weight: 500;
  text-anchor: middle;
}

.sketch-dimension-pill.clickable {
  cursor: pointer;
  pointer-events: auto;
}

.sketch-dimension-pill.clickable:hover rect {
  fill: #fff9f0;
  stroke: #d56100;
  stroke-width: 1.5;
}

.sketch-dimension-pill.clickable:hover text {
  fill: #d56100;
  font-weight: 600;
}

/* The line that turns while an angle is typed. */
.sketch-angle-turn {
  stroke: #d56100;
  stroke-width: 3;
  stroke-dasharray: 6 4;
  vector-effect: non-scaling-stroke;
  opacity: 0.85;
}

.sketch-dimension-extension {
  stroke: rgba(90, 57, 23, 0.45);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.sketch-dimension-line {
  fill: none;
  stroke: #3a2816;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.sketch-dimension-arrow {
  fill: #3a2816;
  stroke: none;
}

.sketch-segment-dimensions.preview rect {
  fill: rgba(255, 255, 255, 0.94);
  stroke: rgba(235, 228, 220, 0.86);
}

.sketch-segment-dimensions.preview text {
  fill: #3a2816;
}

.sketch-measurement > line {
  stroke: #d56100;
  stroke-width: 2;
  stroke-dasharray: 5 4;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.sketch-measurement.pending > line {
  stroke: #ce7416;
}

.sketch-measurement-point {
  fill: #ffffff;
  stroke: #d56100;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.sketch-measurement-point.pending {
  stroke: #ce7416;
}

.sketch-measurement-point.hover {
  fill: #ce7416;
  stroke: #ffffff;
}

.sketch-measurement-pill {
  cursor: pointer;
}

.sketch-measurement-pill rect {
  fill: rgba(255, 255, 255, 0.94);
  stroke: rgba(235, 228, 220, 0.86);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.sketch-measurement-pill text {
  fill: #3a2816;
  font-weight: 500;
  text-anchor: middle;
  pointer-events: none;
}

.sketch-measurement-pill:hover rect {
  fill: rgba(255, 255, 255, 0.98);
  stroke: rgba(166, 86, 0, 0.85);
}

.sketch-measurement-pill text.remove {
  fill: #897560;
}

.sketch-point-actions {
  position: absolute;
  top: 44px;
  left: 50%;
  z-index: 10;
  display: flex;
  gap: 5px;
  padding: 5px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #dccdbd;
  border-radius: 22px;
  box-shadow: 0 3px 12px rgba(73, 53, 31, 0.16);
  transform: translateX(-50%);
}

.sketch-point-actions button {
  display: inline-flex;
  min-width: 62px;
  height: 35px;
  padding: 0 9px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #725b43;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 17px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 600;
}

.sketch-point-actions button:disabled {
  cursor: default;
  opacity: 0.4;
}

.sketch-point-actions button:disabled:hover {
  color: #725b43;
  background: transparent;
  border-color: transparent;
}

.sketch-point-actions button:hover {
  color: #8e5112;
  background: #f7f2ea;
  border-color: #e4c7a9;
}

.sketch-point-actions svg {
  width: 17px;
  height: 17px;
}

.sketch-point-actions button.active {
  color: #8e5112;
  background: #f7f2ea;
  border-color: #e4c7a9;
}

.sketch-point-divider {
  width: 1px;
  height: 20px;
  margin: auto 2px;
  background: #dccdbd;
}

/* The middle of the selection, typed in mm from the sketch's origin (#1064). */
.sketch-selection-position {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 2px;
  color: #725b43;
  font-size: 11px;
  font-weight: 700;
}

.sketch-selection-position input {
  width: 64px;
  height: 29px;
  padding: 0 8px;
  color: #746352;
  font: 700 12px/1 var(--font-ui);
  background: #ffffff;
  border: 1px solid #daccbe;
  border-radius: 999px;
  outline: 0;
}

.sketch-selection-position input:focus {
  border-color: #ea953d;
  box-shadow: 0 0 0 3px rgba(161, 83, 0, 0.14);
}

.sketch-selection-position input:disabled {
  cursor: default;
  opacity: 0.52;
}

.sketch-corner-dialog {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px;
}

.sketch-corner-label {
  font-size: 11px;
  font-weight: 700;
  color: #725b43;
}

.sketch-corner-input {
  width: 52px;
  height: 28px;
  padding: 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: #49351f;
  background: #ffffff;
  border: 1px solid #dccdbd;
  border-radius: 6px;
  text-align: right;
  outline: none;
}

.sketch-corner-input:focus {
  border-color: #8e5112;
  box-shadow: 0 0 0 2px rgba(142, 81, 18, 0.15);
}

.sketch-corner-unit {
  font-size: 11px;
  font-weight: 600;
  color: #907d6a;
}

.sketch-corner-submit,
.sketch-corner-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 14px;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
}

.sketch-corner-submit {
  color: #2e7d32;
  background: #e8f5e9;
}

.sketch-corner-submit:hover {
  background: #c8e6c9;
  color: #1b5e20;
}

.sketch-corner-cancel {
  color: #725b43;
}

.sketch-corner-cancel:hover {
  background: #f7f2ea;
  color: #8e5112;
}

.sketch-corner-submit svg,
.sketch-corner-cancel svg {
  width: 15px;
  height: 15px;
}

.camera-controls {
  position: absolute;
  /* Der Ansichtswuerfel endet bei 104 Pixeln; darunter reichen 16 Pixel Luft.
     Die 69 Pixel Abstand von frueher fehlten unten, wo die Leiste auf einem
     flachen Fenster in die Fusszeile lief. */
  top: 120px;
  left: 10px;
  /* Above the movable object list (10), which passes underneath. */
  z-index: 11;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 4px;
  background: #faf7f3;
  border: 1px solid rgba(219, 207, 194, 0.9);
  border-radius: 17px;
  box-shadow: 0 10px 30px rgba(84, 59, 32, 0.14), 0 2px 6px rgba(84, 59, 32, 0.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
          backdrop-filter: blur(14px) saturate(1.15);
}

.camera-controls button {
  position: relative;
  display: grid;
  width: 44px;
  height: 40px;
  place-items: center;
  color: #5a3917;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  box-shadow: none;
  cursor: pointer;
  transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
}

/* The column on the left follows the toolbar size setting: its own buttons
   and the first button of each group, not the popovers they open. Each icon
   keeps its size relative to the others (they are drawn from 22 to 28 px), so
   the browser zooms the icon instead of every icon getting one new size. */
.camera-controls > button,
.camera-controls > div > button,
.camera-controls > .camera-group > div > button,
.camera-controls > .camera-controls-handle > button {
  width: calc(44px * var(--toolbar-scale));
  height: calc(40px * var(--toolbar-scale));
}

.camera-controls > button > svg,
.camera-controls > div > button > svg,
.camera-controls > .camera-group > div > button > svg,
.camera-controls > .camera-controls-handle > button > svg {
  zoom: var(--toolbar-scale);
}

.camera-controls button:hover {
  color: #321d07;
  background: rgba(247, 235, 223, 0.82);
  border-color: rgba(207, 182, 155, 0.7);
  transform: translateX(1px);
}

.camera-controls button:focus-visible {
  outline: 2px solid #d27f28;
  outline-offset: 1px;
}

.camera-controls.collapsed {
  border-radius: 17px;
}

.camera-controls button.active,
.camera-controls button[aria-pressed="true"] {
  color: #8e4b06;
  background: #f4efe5;
  border-color: #d48a3d;
  box-shadow: inset 3px 0 0 #c56808;
}

/* Its buttons (place, eye, reset) take their places in the group around them, so a flat window's two columns can fill rows with them. */
.workplane-control-group {
  display: contents;
}

.tape-control-group {
  position: relative;
}

/* A grip for panels without a title bar: it moves them across the workplane. */
.panel-grip {
  display: grid;
  place-items: center;
  align-self: stretch;
  width: 16px;
  color: #b4a08b;
  border-radius: 6px;
  cursor: -webkit-grab;
  cursor: grab;
  touch-action: none;
}

.panel-grip:hover {
  color: #6b5641;
  background: rgba(233, 224, 211, 0.7);
}

.tape-tool-popover.moving,
.tape-tool-popover.moving .panel-grip {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

html[data-theme="dark"] .panel-grip {
  color: #8a7866;
}

html[data-theme="dark"] .panel-grip:hover {
  color: #e8dccd;
  background: rgba(68, 58, 48, 0.8);
}

.tape-tool-popover {
  position: absolute;
  top: 2px;
  left: calc(100% + 10px);
  display: flex;
  gap: 3px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(219, 207, 194, 0.94);
  border-radius: 13px;
  box-shadow: 0 8px 24px rgba(84, 59, 32, 0.18), 0 2px 6px rgba(84, 59, 32, 0.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
          backdrop-filter: blur(14px) saturate(1.15);
  animation: tape-tools-in 130ms ease-out;
}

.camera-controls .tape-tool-popover button {
  width: 35px;
  height: 35px;
  border-radius: 9px;
}

/* The question mark sits in the row like the tools beside it. */
.camera-controls .tape-tool-popover .tape-popover-help {
  width: 35px;
  height: 35px;
  border-radius: 9px;
}

.camera-controls .tape-tool-popover .tape-delete-button.active {
  color: #b42318;
  background: #fff0ee;
  border-color: #ee9b92;
  box-shadow: inset 3px 0 0 #dc3f36;
}

@keyframes tape-tools-in {
  from {
    opacity: 0;
    transform: translateX(-4px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.section-control-group {
  position: relative;
}

/* The first button folds the bar away and, dragged, moves it (Stefan, 31.10.2026). A grip above the arrow says so; in two
   columns it sits in the middle of the bar. */
.camera-controls-handle {
  display: flex;
  justify-content: center;
  cursor: -webkit-grab;
  cursor: grab;
  touch-action: none;
}

.camera-controls.moving .camera-controls-handle {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.camera-controls .camera-controls-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  cursor: inherit;
}

.camera-controls .camera-controls-toggle > svg:first-child {
  opacity: 0.55;
}

/* What belongs together in the camera bar sits in a frame of its own (Stefan, 31.10.2026): the view, the zoom, the
   projection, the workplane, the measuring and the notes. One column: the buttons below each other. Two columns (a flat
   window): each group takes whole rows, two buttons wide, so a pair like plus and minus never splits. */
.camera-controls > .camera-group {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 1px;
  border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  border-radius: 14px;
}

/* The section button is the last one in the bar, so the panel opens upwards
   from it; anchored at the top it ran out of the window below. */
.section-tool-popover {
  position: absolute;
  bottom: 0;
  left: calc(100% + 10px);
  max-height: calc(100vh - 150px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 285px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(219, 207, 194, 0.94);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(84, 59, 32, 0.18), 0 2px 8px rgba(84, 59, 32, 0.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
          backdrop-filter: blur(14px) saturate(1.15);
  animation: section-tools-in 130ms ease-out;
  color: #3b2c1d;
  font-size: 13px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  z-index: 60;
}

@keyframes section-tools-in {
  from {
    opacity: 0;
    transform: translateX(-4px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.section-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* The title bar moves the panel across the workplane, like the object list's. */
.section-popover-header.movable {
  margin: -4px -4px 0;
  padding: 4px;
  border-radius: 8px;
  cursor: -webkit-grab;
  cursor: grab;
  touch-action: none;
}

.section-tool-popover.moving,
.section-tool-popover.moving .section-popover-header.movable {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.section-popover-title {
  font-weight: 600;
  font-size: 13px;
  color: inherit;
  flex: 1 1;
}

.camera-controls .section-tool-popover .section-toggle-btn {
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid #d2c8be;
  background: #f4efe9;
  color: #7a6e60;
  cursor: pointer;
  transition: all 120ms ease;
  width: auto;
  height: 24px;
}

.camera-controls .section-tool-popover .section-toggle-btn.active {
  background: #d27009;
  border-color: #b75e05;
  color: #ffffff;
  box-shadow: 0 1px 4px rgba(210, 112, 9, 0.35);
}

.camera-controls .section-tool-popover .section-popover-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  color: #8b7d6e;
  border-radius: 6px;
  cursor: pointer;
}

.section-tool-popover .section-popover-help {
  width: 24px;
  height: 24px;
  border-radius: 6px;
}

.camera-controls .section-tool-popover .section-popover-close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #2b1f14;
}

.section-popover-axis-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-label {
  font-size: 12px;
  font-weight: 500;
  color: #7a6e60;
  min-width: 48px;
}

.section-axis-buttons {
  display: flex;
  flex: 1 1;
  gap: 3px;
  background: #ebe5dc;
  padding: 2px;
  border-radius: 8px;
}

.camera-controls .section-tool-popover .section-axis-btn {
  flex: 1 1;
  height: 28px;
  width: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: #635546;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: all 100ms ease;
}

/* Axes, workplane, view (#644): words, not letters, so they may not squeeze to nothing. */
.camera-controls .section-tool-popover .section-orientation-btn {
  flex: 1 1 auto;
  padding: 0 6px;
  white-space: nowrap;
}

/* The cut face (#446): its name above the three looks, so a long name in any language fits the panel. */
.section-popover-axis-row.section-cut-face-row {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}

.section-cut-face-row .section-axis-buttons {
  flex: none;
}

.camera-controls .section-tool-popover .section-cut-face-row .section-orientation-btn {
  flex: 1 1;
}

.camera-controls .section-tool-popover .section-axis-btn:hover {
  background: rgba(255, 255, 255, 0.5);
  color: #2b1f14;
}

.camera-controls .section-tool-popover .section-axis-btn.active {
  background: #ffffff;
  color: #d27009;
  box-shadow: 0 1px 3px rgba(84, 59, 32, 0.15);
}

.camera-controls .section-tool-popover .section-flip-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid #dcd4c9;
  border-radius: 8px;
  background: #fbf9f6;
  color: #635546;
  cursor: pointer;
  transition: all 120ms ease;
}

.camera-controls .section-tool-popover .section-flip-btn:hover {
  background: #f2ede6;
  color: #2b1f14;
}

.camera-controls .section-tool-popover .section-flip-btn.active {
  background: #fff3e6;
  border-color: #f0a256;
  color: #d27009;
}

.section-popover-slider-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.section-slider-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.section-slider-line {
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-slider-scale {
  min-width: 34px;
  font-size: 11px;
  color: #8b7d6e;
}

.section-slider {
  flex: 1 1;
  height: 20px;
  margin: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
  cursor: pointer;
}

.section-slider::-webkit-slider-runnable-track {
  height: 4px;
  background: #ded7cd;
  border-radius: 999px;
}

.section-slider::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
  margin-top: -6px;
  -webkit-appearance: none;
          appearance: none;
  background: #ffffff;
  border: 2px solid #d27009;
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(68, 47, 24, 0.2);
}

.section-slider::-moz-range-track {
  height: 4px;
  background: #ded7cd;
  border-radius: 999px;
}

.section-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: #ffffff;
  border: 2px solid #d27009;
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(68, 47, 24, 0.2);
}

.section-number-wrap {
  display: flex;
  align-items: center;
  gap: 3px;
  background: #f4efe9;
  border: 1px solid #dcd4c9;
  border-radius: 7px;
  padding: 2px 5px;
}

.section-number-input {
  width: 44px;
  border: none;
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  color: inherit;
  text-align: right;
  padding: 0;
  margin: 0;
  outline: none;
  -moz-appearance: textfield;
}

.section-number-input::-webkit-outer-spin-button,
.section-number-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.section-unit {
  font-size: 11px;
  color: #8b7d6e;
}

.section-popover-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px solid #ebe4db;
}

.section-footer-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.camera-controls .section-tool-popover .section-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 30px;
  min-height: 30px;
  width: auto;
  padding: 0 10px;
  border: 1px solid #dcd4c9;
  border-radius: 8px;
  background: #fbf9f6;
  color: #635546;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  transition: all 120ms ease;
}

.camera-controls .section-tool-popover .section-action-btn:hover {
  background: #f2ede6;
  color: #2b1f14;
}

.inspector-bundle-note {
  margin: 0;
  padding: 10px 12px;
  color: #6d5a46;
  font-size: 12px;
  line-height: 1.45;
  background: #faf6ef;
  border: 1px solid #ece2d4;
  border-radius: 8px;
}

html[data-theme="dark"] .inspector-bundle-note {
  color: #c9b8a5;
  background: #2b2016;
  border-color: #4a3a2a;
}

.section-measure-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px solid #ebe4db;
}

.camera-controls .section-tool-popover .section-measure-btn.active {
  color: #fff;
  background: #c86a12;
  border-color: #b05c0e;
}

.section-measure-readout {
  display: grid;
  grid-gap: 1px;
  gap: 1px;
  min-width: 0;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.section-measure-readout strong {
  color: #2b1f14;
  font-size: 14px;
  font-weight: 600;
}

.section-measure-readout span,
.section-measure-help {
  color: #7a6e60;
  font-size: 11px;
  line-height: 1.35;
}

.section-measure-help {
  flex: 1 1 140px;
  min-width: 0;
}

.section-measure-overlay {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
}

.section-measure-outline {
  stroke: #1677c8;
  stroke-width: 2;
  stroke-linejoin: round;
}

.section-measure-line {
  stroke: #c86a12;
  stroke-width: 2;
}

.section-measure-point {
  fill: #c86a12;
  stroke: #fff;
  stroke-width: 1.5;
}

.section-measure-hover {
  fill: none;
  stroke: #c86a12;
  stroke-width: 2;
}

.section-measure-center-halo {
  fill: none;
  stroke: #fff;
  stroke-width: 4;
  opacity: 0.85;
}

.section-measure-center {
  fill: none;
  stroke: #7a3d00;
  stroke-width: 1.5;
}

.section-measure-hover.center,
.section-measure-hover.opposite {
  fill: rgba(200, 106, 18, 0.22);
}

.section-measure-hover.free {
  stroke: #9a8b7b;
  stroke-dasharray: 3 2;
}

.workplane-wrap.section-measure-mode canvas {
  cursor: crosshair;
}

.section-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: #7a6e60;
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.section-checkbox-label input[type="checkbox"] {
  cursor: pointer;
  accent-color: #d27009;
}

.workplane-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.workplane-plane {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #fcfbf8;
}

.workplane-plane::before {
  content: none;
}

.three-workplane-host {
  position: absolute;
  inset: 0;
  z-index: 1;
  touch-action: none;
  cursor: default;
}

.three-workplane-host:active {
  cursor: default;
}

.workplane-wrap.placing-workplane .three-workplane-host,
.workplane-wrap.placing-workplane .three-workplane-host:active,
.workplane-wrap.cruising .three-workplane-host,
.workplane-wrap.cruising .three-workplane-host:active {
  cursor: crosshair;
}

/* The tape measure's crosshair is open in the middle: the system one covered the small ring that
   shows where the point will snap (#963). Dark lines with a light edge, readable on any ground. */
.workplane-wrap.tape-mode .three-workplane-host,
.workplane-wrap.tape-mode .three-workplane-host:active {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg stroke-linecap='round'%3E%3Cpath d='M16 2v8M16 22v8M2 16h8M22 16h8' stroke='%23ffffff' stroke-width='3.5'/%3E%3Cpath d='M16 2v8M16 22v8M2 16h8M22 16h8' stroke='%23241f20' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E") 16 16, crosshair;
}

.workplane-wrap.corner-ruler-mode .three-workplane-host,
.workplane-wrap.corner-ruler-mode .three-workplane-host:active {
  cursor: crosshair;
}

.workplane-wrap.tape-delete-mode .three-workplane-host,
.workplane-wrap.tape-delete-mode .three-workplane-host:active {
  cursor: default;
}

.workplane-wrap.tape-move-mode .three-workplane-host,
.workplane-wrap.tape-move-mode .three-workplane-host:active {
  cursor: default;
}

.workplane-wrap.modifier-edge-pick .three-workplane-host,
.workplane-wrap.modifier-edge-pick .three-workplane-host:active {
  cursor: crosshair;
}

.three-workplane-host canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* The round Select multiple button of a touch screen (#337): it stands in the lower left while a
   body is picked with a finger. Tapped, it locks Select multiple and every further tap adds a body
   to the selection; tapped again, it ends the mode, clears the selection and goes away. */
.touch-multi-select {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 30;
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  color: var(--foreground);
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(75, 56, 35, 0.22);
  cursor: pointer;
  touch-action: none;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.touch-multi-select:hover,
.touch-multi-select:focus-visible {
  background: var(--tile-hover);
  border-color: var(--active-tab);
}

.touch-multi-select:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.touch-multi-select.active {
  color: #fff;
  background: var(--primary);
  border-color: var(--primary);
  transform: scale(0.94);
}

html[data-theme="dark"] .touch-multi-select {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

.selection-counter {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  color: #fff;
  background: #bf6508;
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
  pointer-events: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.selection-counter[hidden] {
  display: none;
}

.selection-marquee {
  position: absolute;
  z-index: 3;
  background: rgba(166, 86, 0, 0.1);
  border: 1px solid rgba(166, 86, 0, 0.82);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42);
  pointer-events: none;
}

/* A frame that takes whatever it touches, where the direction of the drag decides (#430). */
.selection-marquee.touching {
  background: rgba(34, 139, 84, 0.12);
  border-color: rgba(26, 118, 70, 0.86);
  border-style: dashed;
}

.move-dimension-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.move-dimension-guides {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

.move-dimension-line {
  stroke: #463626;
  stroke-width: 1.8;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.7));
}

.move-dimension-projection {
  stroke: rgba(70, 55, 38, 0.38);
  stroke-width: 1.25;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.move-dimension-guides marker path {
  fill: #463626;
}

.move-dimension-overlay.active .move-dimension-value {
  pointer-events: none;
}

.move-dimension-input {
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
}

.origin-dimension-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.dimension-label.origin-dimension-value {
  pointer-events: none;
  cursor: default;
  opacity: 0.92;
  background: rgba(236, 248, 253, 0.94);
  border: 1px solid rgba(110, 196, 232, 0.75);
  color: #2b88b0;
  box-shadow: 0 1px 4px rgba(40, 110, 150, 0.12);
}

/* --- Winkellineal-Werkzeug ---------------------------------------------
   Reine Bildschirm-Darstellung wie das Massband, kein Three.js-Objekt und
   kein Formen-Katalog-Eintrag - der Griff ist immer direkt ziehbar, ohne
   eigenen Verschieben-Modus. Siehe layerling-lineal.md. */
.corner-ruler-overlay {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
}

.corner-ruler-guides {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

.corner-ruler-arm {
  stroke: #5a3917;
  stroke-width: 2.2;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.corner-ruler-tick {
  stroke: #8a6a45;
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.corner-ruler-handle {
  fill: #ffffff;
  stroke: #b66108;
  stroke-width: 2.4;
  vector-effect: non-scaling-stroke;
  pointer-events: all;
  cursor: -webkit-grab;
  cursor: grab;
}

.corner-ruler-handle:active {
  cursor: -webkit-grabbing;
  cursor: grabbing;
  fill: #f6f1e8;
  filter: drop-shadow(0 0 4px rgba(129, 67, 0, 0.4));
}

.corner-ruler-tick-label {
  position: absolute;
  z-index: 2;
  color: #5a3917;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.corner-ruler-delete {
  position: absolute;
  z-index: 8;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #b42318;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(238, 155, 146, 0.9);
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(58, 40, 20, 0.16);
  pointer-events: all;
  cursor: pointer;
  transform: translate(-50%, -50%);
}

.corner-ruler-delete:hover {
  background: #fff0ee;
}

.corner-ruler-mode-toggle {
  position: absolute;
  z-index: 8;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #2e7d32;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(129, 199, 132, 0.9);
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(46, 125, 50, 0.16);
  pointer-events: all;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: all 0.15s ease;
}

/* The little switch beside each green number: that number counts to the edge or the middle on its own. */
.ruler-axis-mode-toggle {
  width: 18px;
  height: 18px;
  z-index: 5;
}

/* The switch sits in the same frame as its number, the number's left edge (forum). */
.ruler-coordinate-field {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: stretch;
  background: rgba(255, 255, 255, 0.96);
  border: 1.5px solid #4caf50;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(46, 125, 50, 0.18);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.ruler-coordinate-field .corner-ruler-mode-toggle {
  position: static;
  width: 22px;
  height: auto;
  flex: none;
  border: 0;
  border-right: 1px solid rgba(129, 199, 132, 0.8);
  border-radius: 2px 0 0 2px;
  box-shadow: none;
  transform: none;
  pointer-events: all;
}

.ruler-coordinate-field .ruler-coordinate-badge {
  position: static;
  min-width: 40px;
  border: 0;
  border-radius: 0 2px 2px 0;
  box-shadow: none;
  background: transparent;
  transform: none;
}

/* The axis the number counts along, as a small letter in front of it (#777). */
.ruler-coordinate-field .ruler-coordinate-axis {
  margin-right: 4px;
  font-size: 0.78em;
  font-weight: 700;
  opacity: 0.7;
  text-transform: lowercase;
}

/* The ruler's lines stay in view over bodies (the eye is open) or hide behind them. */
.corner-ruler-occlude-toggle,
.corner-ruler-selected-toggle {
  color: #6b5b46;
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(182, 97, 8, 0.45);
}

.corner-ruler-occlude-toggle.active,
.corner-ruler-selected-toggle.active {
  color: #b66108;
}

.corner-ruler-tick-label.hidden,
.ruler-dimension-label.hidden {
  opacity: 0.2;
}

.corner-ruler-mode-toggle:hover {
  background: #e8f5e9;
  border-color: #2e7d32;
}

.ruler-coordinate-badge {
  position: absolute;
  z-index: 4;
  min-width: 44px;
  padding: 3px 8px;
  color: #1b5e20;
  background: rgba(255, 255, 255, 0.96);
  border: 1.5px solid #4caf50;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(46, 125, 50, 0.18);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  pointer-events: all;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.ruler-coordinate-badge:hover {
  background: #e8f5e9;
  border-color: #2e7d32;
  box-shadow: 0 2px 6px rgba(46, 125, 50, 0.28);
}

.dimension-input.ruler-coordinate-input {
  color: #1b5e20;
  border: 2px solid #2e7d32;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.25);
  background: #ffffff;
}

[data-theme="dark"] .corner-ruler-mode-toggle {
  color: #81c784;
  background: rgba(30, 40, 30, 0.95);
  border-color: rgba(76, 175, 80, 0.5);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .corner-ruler-mode-toggle:hover {
  background: rgba(46, 125, 50, 0.35);
  border-color: #81c784;
}

[data-theme="dark"] .ruler-coordinate-badge {
  color: #a5d6a7;
  background: rgba(24, 32, 24, 0.95);
  border-color: #66bb6a;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .ruler-coordinate-badge:hover {
  background: rgba(46, 125, 50, 0.4);
  border-color: #a5d6a7;
}

[data-theme="dark"] .dimension-input.ruler-coordinate-input {
  color: #a5d6a7;
  border-color: #66bb6a;
  background: #1e281e;
  box-shadow: 0 0 0 3px rgba(102, 187, 106, 0.3);
}


.ruler-dimension-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.ruler-dimension-label {
  position: absolute;
  z-index: 3;
  min-width: 40px;
  padding: 4px 8px;
  color: #3a2816;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(224, 208, 190, 0.96);
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(58, 40, 20, 0.12);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.ruler-dimension-label.editable {
  pointer-events: all;
  cursor: pointer;
  border-color: rgba(166, 86, 0, 0.85);
}

.ruler-dimension-label.editable:hover {
  background: #fff8ee;
}

.ruler-duplicate-handle {
  position: absolute;
  z-index: 3;
  width: 20px;
  height: 20px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: #b66108;
  border: 1px solid #8a4a06;
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(58, 40, 20, 0.24);
  cursor: pointer;
  pointer-events: all;
  transform: translate(-50%, -50%);
}

.ruler-duplicate-handle:hover {
  background: #cf6e09;
}

.ruler-duplicate-preview {
  position: absolute;
  z-index: 9;
  padding: 4px 8px;
  color: #ffffff;
  background: rgba(166, 86, 0, 0.92);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  pointer-events: none;
  transform: translate(-50%, -140%);
}

.transform-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.transform-overlay :is(.transform-handle, .rotate-handle, .rotation-protractor-plane, .rotation-edit) {
  cursor: inherit;
}

.transform-guides {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

.transform-overlay.hide-selection-chrome .transform-guides,
.transform-overlay.hide-selection-chrome .dimension-label,
.transform-overlay.hide-selection-chrome .transform-handle,
.transform-overlay.hide-selection-chrome .rotate-handle {
  opacity: 0;
}

.transform-guides line {
  stroke: rgba(46, 39, 31, 0.72);
  stroke-width: 1.15;
  stroke-dasharray: 4 4;
  vector-effect: non-scaling-stroke;
}

.transform-guides #dimension-arrow path {
  fill: rgba(33, 27, 20, 0.92);
}

.align-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.align-guides {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

.align-guides line {
  stroke: rgba(173, 89, 0, 0.92);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
  vector-effect: non-scaling-stroke;
}

.align-dot {
  position: absolute;
  width: 14px;
  height: 14px;
  padding: 0;
  border: 2px solid #fcfbf8;
  border-radius: 999px;
  background: #312519;
  box-shadow: 0 1px 5px rgba(40, 27, 13, 0.32);
  cursor: pointer;
  pointer-events: auto;
  transform: translate(-50%, -50%);
}

/* For a finger or a rubber-tip stylus the dots keep their look and catch from further away, a finger's width round them (#854). */
@media (pointer: coarse) {
  .align-dot {
    touch-action: none;
  }

  .align-dot::before {
    position: absolute;
    inset: -14px;
    border-radius: 999px;
    content: "";
  }
}

.align-dot:hover:not(:disabled),
.align-dot:focus-visible:not(:disabled) {
  background: #e17709;
  outline: none;
  box-shadow: 0 0 0 4px rgba(173, 89, 0, 0.18), 0 1px 5px rgba(40, 27, 13, 0.32);
}

.align-dot.disabled,
.align-dot:disabled {
  background: #b0a498;
  box-shadow: none;
  cursor: default;
  opacity: 0.72;
}

/* With Alt held the dots are squares, like the size handles: they stretch the parts instead of moving them (#998). */
.align-overlay.size-mode .align-dot {
  border-radius: 2px;
}

.mirror-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.mirror-guides {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

.mirror-guides line {
  stroke: rgba(173, 89, 0, 0.78);
  stroke-width: 1.45;
  stroke-dasharray: 5 4;
  vector-effect: non-scaling-stroke;
}

.mirror-handle {
  position: absolute;
  display: grid;
  width: 64px;
  height: 32px;
  padding: 0;
  place-items: center;
  color: #312519;
  background: transparent;
  border: 0;
  cursor: pointer;
  pointer-events: auto;
  transform: translate(-50%, -50%) rotate(var(--mirror-angle, 0deg));
}

.mirror-handle-icon {
  width: 64px;
  height: 24px;
  overflow: visible;
  filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.96)) drop-shadow(0 1px 4px rgba(40, 27, 13, 0.28));
}

.mirror-handle-icon path {
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mirror-handle:hover,
.mirror-handle:focus-visible {
  color: #e17709;
  outline: none;
}

.dimension-mark .dimension-extension,
.dimension-mark .dimension-line {
  stroke: rgba(33, 27, 20, 0.88);
  stroke-width: 1.25;
  stroke-dasharray: none;
  vector-effect: non-scaling-stroke;
}

.dimension-mark .dimension-line {
  marker-start: url("#dimension-arrow");
  marker-end: url("#dimension-arrow");
}

.dimension-label {
  position: absolute;
  left: 0;
  top: 0;
  /* Dimension labels and inputs must always be at the top, above the transform
     handles. Both must also stay clickable above the rotate handle, whose
     hit area is larger than its glyph. */
  z-index: 10;
  min-width: 43px;
  padding: 5px 7px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(235, 228, 220, 0.86);
  color: #3a2816;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  pointer-events: auto;
  cursor: text;
  transform: translate3d(var(--overlay-x, 0), var(--overlay-y, 0), 0) translate(-50%, -50%);
  will-change: transform;
  box-shadow: 0 1px 4px rgba(58, 40, 20, 0.09);
}

/* With a finger the first tap on a value box only marks it; the second tap opens the number field (#855). */
.dimension-label.armed {
  border-color: rgba(166, 86, 0, 0.85);
  box-shadow: 0 0 0 3px rgba(173, 89, 0, 0.22), 0 1px 4px rgba(58, 40, 20, 0.09);
}

.dimension-input {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  width: 64px;
  padding: 4px 6px;
  border-radius: 3px;
  border: 1px solid rgba(166, 86, 0, 0.85);
  background: rgba(255, 255, 255, 0.98);
  color: #3a2816;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  pointer-events: auto;
  transform: translate3d(var(--overlay-x, 0), var(--overlay-y, 0), 0) translate(-50%, -50%);
  will-change: transform;
  box-shadow: 0 2px 8px rgba(166, 86, 0, 0.18);
  outline: none;
}

/* Length and angle of the next sketch line, typed while drawing (#194). */
.sketch-typed-line {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  max-width: 260px;
  padding: 5px 8px;
  border-radius: 4px;
  border: 1px solid rgba(166, 86, 0, 0.85);
  background: rgba(255, 255, 255, 0.98);
  color: #3a2816;
  font-size: 13px;
  box-shadow: 0 2px 8px rgba(166, 86, 0, 0.18);
  transform: translate3d(var(--overlay-x, 0), var(--overlay-y, 0), 0) translate(-50%, calc(-100% - 14px));
  pointer-events: auto;
}

.sketch-typed-line label {
  display: flex;
  align-items: center;
  gap: 4px;
}

.sketch-typed-line input {
  width: 58px;
  padding: 3px 5px;
  border: 1px solid rgba(166, 86, 0, 0.45);
  border-radius: 3px;
  background: #ffffff;
  color: inherit;
  font: inherit;
  font-weight: 500;
  text-align: right;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.sketch-typed-line input:focus {
  outline: 2px solid rgba(166, 86, 0, 0.55);
  outline-offset: 0;
}

.sketch-typed-line-warning {
  flex-basis: 100%;
  margin: 0;
  color: #c62828;
  font-size: 12px;
  line-height: 1.3;
}

.sketch-typed-line input[aria-invalid="true"] {
  border-color: #c62828;
  color: #c62828;
}

.rotation-protractor-plane {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: auto;
  cursor: -webkit-grab;
  cursor: grab;
  opacity: 0.9;
  filter: drop-shadow(0 1px 2px rgba(58, 40, 20, 0.14));
}

.rotation-protractor-plane:active {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.rotation-protractor-outer,
.rotation-protractor-inner {
  fill: rgba(224, 140, 51, 0.1);
  stroke: rgba(166, 86, 0, 0.85);
  stroke-width: 1.3;
  vector-effect: non-scaling-stroke;
}

.rotation-protractor-inner {
  fill: none;
  stroke: rgba(166, 86, 0, 0.46);
}

.rotation-tick {
  stroke: rgba(166, 86, 0, 0.7);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.rotation-tick.major {
  stroke: rgba(115, 59, 0, 0.9);
  stroke-width: 1.6;
}

.rotation-tick.fine {
  stroke: rgba(166, 86, 0, 0.55);
  stroke-width: 0.8;
}

.rotation-zero-line {
  stroke: rgba(70, 59, 47, 0.38);
  stroke-width: 1.1;
  vector-effect: non-scaling-stroke;
}

.rotation-current-line {
  stroke: #f05a22;
  stroke-width: 1.8;
  vector-effect: non-scaling-stroke;
}

.rotation-zero-label {
  fill: #3a2816;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, 0.88);
  stroke-width: 4px;
  font-size: 13px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: middle;
}

.transform-handle,
.rotate-handle {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 6px;
  height: 6px;
  padding: 0;
  pointer-events: auto;
  transform: translate3d(var(--overlay-x, 0), var(--overlay-y, 0), 0) translate(-50%, -50%);
  will-change: transform;
}

/* A finger drags a handle without the browser taking the gesture for a scroll and ending the drag (#337). */
.transform-handle,
.rotate-handle {
  touch-action: none;
}

/* For a finger or a rubber-tip stylus the handles keep their look and catch from further away. */
@media (pointer: coarse) {
  .transform-handle::before,
  .rotate-handle::before {
    position: absolute;
    inset: -15px;
    content: "";
  }
}

/* A small body: the wide zones of its handles would cover all of it and every touch would grab one (#574). */
@media (pointer: coarse) {
  .transform-overlay.small-body .transform-handle::before {
    inset: 0;
  }
}

.transform-handle {
  z-index: 5;
  background: #f2eee8;
  border: 1.5px solid #433629;
  box-shadow: 0 1px 2px rgba(40, 30, 20, 0.16);
  transform: translate3d(var(--overlay-x, 0), var(--overlay-y, 0), 0) translate(-50%, -50%) rotate(var(--transform-handle-angle, 0deg));
}

.transform-handle.corner,
.transform-handle.height-top,
.transform-handle.height-lift {
  width: 10px;
  height: 10px;
  background: #f5f2ec;
}

/* Slope along: the lower end's dot, round so it is not taken for the height. */
.transform-handle.height-top.slope-end {
  border-radius: 50%;
  background: #e0873a;
  border-color: #6b3a12;
}

.transform-handle.edge,
.transform-handle.dark {
  width: 9px;
  height: 9px;
  background: #433629;
}

/* The handles that change one measure carry the colour of its axis, as the turn arrows do (#1078): the middle of a side width or depth, the top height. The corners change two and stay neutral. */
.transform-handle.axis-x { background: #d6363c; border-color: #7d1a1e; }
.transform-handle.axis-y { background: #2f9a4b; border-color: #17542a; }
.transform-handle.axis-z { background: #2f6fe0; border-color: #163f86; }

.transform-handle:not(.height-lift):hover {
    background: var(--hover-accent-color);
    border-color: var(--hover-accent-border-color);
}

.transform-handle.height-lift {
  border: 0;
  width: 0;
  height: 0;
  background: transparent;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 13px solid #433629;
  box-shadow: none;
}

.transform-handle.height-lift.lower {
  border-bottom: 0;
  border-top: 13px solid #433629;
}

.transform-handle.height-lift:hover {
  border-bottom-color: var(--hover-accent-color);
}

.transform-handle.height-lift.lower:hover {
  border-bottom-color: transparent;
  border-top-color: var(--hover-accent-color);
}

/* A locked selection: the handles turn grey and stay put, but hovering one still shows its dimensions. */
.transform-overlay.locked {
  --locked-handle-ink: #a59c92;
  --locked-handle-fill: #e4e0da;
}

.transform-overlay.locked .transform-handle,
.transform-overlay.locked .transform-handle:hover {
  cursor: not-allowed;
  background: var(--locked-handle-fill);
  border-color: var(--locked-handle-ink);
  box-shadow: none;
}

.transform-overlay.locked .transform-handle.height-lift,
.transform-overlay.locked .transform-handle.height-lift:hover {
  background: transparent;
  border-color: transparent;
  border-bottom-color: var(--locked-handle-ink);
}

.transform-overlay.locked .transform-handle.height-lift.lower,
.transform-overlay.locked .transform-handle.height-lift.lower:hover {
  border-bottom-color: transparent;
  border-top-color: var(--locked-handle-ink);
}

/* The colour itself, not --rotate-handle-axis: the dark theme's axis colours outrank a variable set here. */
.transform-overlay.locked .rotate-handle {
  cursor: not-allowed;
  color: var(--locked-handle-ink);
}

.transform-overlay.locked .rotate-handle:hover .rotate-arrow-arc {
  stroke-width: 2.4;
}

.transform-overlay.locked .dimension-label:disabled {
  cursor: default;
}

.transform-lock-badge {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #6f655b;
  background: rgba(255, 252, 247, 0.95);
  border: 1px solid var(--locked-handle-ink);
  box-shadow: 0 1px 2px rgba(40, 30, 20, 0.16);
  pointer-events: auto;
  transform: translate3d(var(--overlay-x, 0), var(--overlay-y, 0), 0) translate(-50%, -50%);
}

.transform-overlay.hide-selection-chrome .transform-lock-badge {
  opacity: 0;
}

.rotate-handle {
  z-index: 3;
  /* The grab area is 52px; the arrow drawn in it is smaller. */
  width: 52px;
  height: 52px;
  --rotate-handle-ink: #433629;
  --rotate-handle-axis: var(--rotate-handle-ink);
  --rotate-handle-halo: rgba(255, 252, 247, 0.95);
  color: var(--rotate-handle-axis);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  opacity: 1;
  transform: translate3d(var(--overlay-x, 0), var(--overlay-y, 0), 0) translate(-50%, -50%);
}

/* Each arrow carries the colour of the axis it turns about, as in the axis arrows on the plate. */
.rotate-handle.axis-x { --rotate-handle-axis: #d6363c; }
.rotate-handle.axis-y { --rotate-handle-axis: #2f9a4b; }
.rotate-handle.axis-z { --rotate-handle-axis: #2f6fe0; }

/* Hovered, the arrow gets heavier. */
.rotate-handle.rotate-handle:hover .rotate-arrow-arc {
  stroke-width: 3;
}

.rotate-handle-icon,
.rotate-handle-icon svg {
  display: block;
  width: 40px;
  height: 40px;
}

.rotate-handle-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.rotate-handle-icon svg {
  overflow: visible;
  /* A light edge all round keeps the arrow readable on the grid and on the shape. */
  filter: drop-shadow(0 0 1px var(--rotate-handle-halo)) drop-shadow(0 0 1.5px var(--rotate-handle-halo));
}

.rotate-arrow-arc {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rotate-arrow-heads {
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 0.8;
  stroke-linejoin: round;
}

.rotation-edit {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  width: 58px;
  padding: 4px 6px;
  border-radius: 4px;
  border: 1px solid rgba(224, 210, 196, 0.92);
  background: rgba(255, 255, 255, 0.98);
  color: #3a2816;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  pointer-events: auto;
  transform: translate3d(var(--overlay-x, 0), var(--overlay-y, 0), 0) translate(-50%, -50%);
  will-change: transform;
  box-shadow: 0 2px 8px rgba(58, 40, 20, 0.15);
}

.rotation-edit input {
  min-width: 0;
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: right;
  outline: none;
}

.rotation-edit span {
  color: #796550;
}

.rotation-angle-badge {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(224, 208, 190, 0.96);
  color: #6b4a26;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  transform: translate3d(var(--overlay-x, 0), var(--overlay-y, 0), 0) translate(-50%, -50%);
}

html[data-theme="dark"] .rotation-angle-badge {
  background: rgba(38, 30, 22, 0.92);
  border-color: rgba(185, 161, 136, 0.45);
  color: #e8d6bd;
}

.rotation-readout {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  min-width: 34px;
  padding: 5px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(224, 210, 196, 0.8);
  color: #3a2816;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  pointer-events: none;
  transform: translate3d(var(--overlay-x, 0), var(--overlay-y, 0), 0) translate(-50%, -50%);
  will-change: transform;
  box-shadow: 0 2px 8px rgba(58, 40, 20, 0.14);
}

/* The rotation pivot the user set: a crosshair ring on the point the
   selection turns around. White halo so it reads on any body colour. */
.rotation-pivot-marker {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: 18px;
  height: 18px;
  border: 2px solid #dc3f36;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
  pointer-events: none;
  transform: translate3d(var(--overlay-x, 0), var(--overlay-y, 0), 0) translate(-50%, -50%);
  background:
    linear-gradient(#dc3f36, #dc3f36) center / 2px 100% no-repeat,
    linear-gradient(#dc3f36, #dc3f36) center / 100% 2px no-repeat;
}

/* The pivot marker can be dragged to a new place (#140). */
.rotation-pivot-marker.draggable {
  pointer-events: auto;
  cursor: -webkit-grab;
  cursor: grab;
  touch-action: none;
}

.rotation-pivot-marker.draggable.dragging {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.workplane-wrap.pivot-pick-mode .three-workplane-host {
  cursor: crosshair;
}

.shape-inspector {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  width: 320px;
  max-height: none;
  overflow-y: auto;
  /* A thin bar that shows: on a laptop's touchpad the panel is easier to scroll by its bar. */
  scrollbar-color: #cdbfa9 transparent;
  scrollbar-width: thin;
  color: #563e24;
  background: rgba(248, 246, 244, 0.96);
  border-left: 1px solid #e9e2d6;
  box-shadow: -2px 0 10px rgba(86, 62, 36, 0.08);
  /* The toolbar size (Small, Medium, Large) scales the panel as it does the shape library (mail, 21.10.2026);
     useMovablePanel reads this zoom when the panel is moved. */
  zoom: var(--toolbar-scale);
}

.shape-inspector.minimized {
  bottom: auto;
  height: auto;
  overflow: hidden;
}

.shape-inspector.sketch-revolve-inspector,
.shape-inspector.gear-inspector {
  overflow-anchor: none;
}

.shape-inspector::-webkit-scrollbar {
  width: 8px;
}

.shape-inspector::-webkit-scrollbar-track {
  background: transparent;
}

.shape-inspector::-webkit-scrollbar-thumb {
  background: #cdbfa9;
  border-radius: 4px;
}

.shape-inspector::-webkit-scrollbar-thumb:hover {
  background: #b8a88f;
}

.shape-inspector-header {
  display: flex;
  align-items: center;
  height: 50px;
  padding: 0 12px 0 9px;
  background: rgba(254, 253, 252, 0.96);
  border-bottom: 1px solid #ede6da;
}

.shape-inspector-header strong {
  flex: 1 1;
  min-width: 0;
  margin-right: 8px;
  padding-left: 13px;
  /* The same size as the object list's title. */
  font-size: 13px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.shape-inspector-header strong.long-word {
  padding-left: 6px;
  margin-right: 4px;
}

/* The title bar moves the inspector away from the edge. It looks exactly like
   the object list's title bar: same height, colours, buttons and icon sizes. */
.shape-inspector-header.movable {
  gap: 8px;
  height: auto;
  padding: 10px 14px;
  background: rgba(248, 246, 244, 0.98);
  border-bottom: 1px solid #ede6da;
  cursor: -webkit-grab;
  cursor: grab;
  touch-action: none;
}

.shape-inspector-header.movable strong,
.shape-inspector-header.movable strong.long-word {
  margin-right: 0;
  padding-left: 0;
}

.shape-inspector-header.movable .inspector-name {
  gap: 4px;
  margin-right: 0;
}

.shape-inspector-header.movable .inspector-header-actions {
  gap: 2px;
}

.shape-inspector-header.movable .inspector-header-icon,
.shape-inspector-header.movable .inspector-rename-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  color: #8c735d;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}

.shape-inspector-header.movable .inspector-header-icon:hover,
.shape-inspector-header.movable .inspector-rename-button:hover {
  color: #3b2817;
  background: #e9e0d3;
}

.shape-inspector-header.movable .inspector-header-icon.active {
  color: #d3710c;
}

.shape-inspector-header.movable .inspector-help-link {
  width: 24px;
  height: 24px;
  color: inherit;
  opacity: 0.6;
}

.shape-inspector-header.movable .inspector-help-link:hover,
.shape-inspector-header.movable .inspector-help-link:focus-visible {
  opacity: 1;
}

.shape-inspector-header.movable .inspector-name-input {
  margin-left: 0;
  font-size: 13px;
  font-weight: 700;
}

.shape-inspector.moving,
.shape-inspector.moving .shape-inspector-header.movable {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

/* Moved away from the edge: a window of its own, as tall as its content. */
.shape-inspector.floating {
  width: min(320px, calc(100% - 24px));
  border: 1px solid #e9e2d6;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(86, 62, 36, 0.12);
}

/* The name, and the pencil that renames it right beside it. */
.inspector-name {
  display: flex;
  flex: 1 1;
  align-items: center;
  gap: 2px;
  min-width: 0;
  margin-right: 8px;
}

.inspector-name strong {
  flex: 0 1 auto;
  margin-right: 0;
}

.inspector-rename-button {
  display: grid;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  place-items: center;
  color: #7a6550;
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

.inspector-rename-button:hover {
  color: #955717;
  background: #f5f0e8;
}

.inspector-name-input {
  width: 100%;
  min-width: 0;
  margin-left: 9px;
  padding: 4px 6px;
  color: inherit;
  background: #ffffff;
  border: 1px solid #d46b08;
  border-radius: 4px;
  outline: none;
  font-size: 16px;
  font-weight: 600;
}

.inspector-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.shape-inspector button {
  font: inherit;
}

.inspector-snap-dock {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  margin-top: auto;
  padding: 14px 12px 16px;
  background: linear-gradient(180deg, rgba(248, 246, 244, 0), rgba(248, 246, 244, 0.98) 18px, rgba(248, 246, 244, 0.98));
  border-top: 1px solid rgba(231, 224, 216, 0.75);
}

.inspector-header-icon {
  display: grid;
  width: 28px;
  height: 38px;
  place-items: center;
  color: #6f5840;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.inspector-header-icon .vector-toolbar-sprite-icon {
  transform: scale(0.9);
  transform-origin: center;
}

.inspector-header-icon.active {
  color: #d3710c;
}

.shape-state-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 28px;
  gap: 28px;
  margin: 10px 10px 12px;
  padding: 19px 28px 22px;
  background: rgba(255, 255, 255, 0.98);
  border-radius: 8px;
}

.shape-state-card .check-property {
  grid-column: 1 / -1;
  justify-content: center;
  margin-top: -10px;
}

.shape-state-card .check-property:has(input:disabled) {
  opacity: 0.45;
  cursor: default;
}

.shape-state-card button {
  display: grid;
  min-width: 0;
  place-items: center;
  grid-gap: 6px;
  gap: 6px;
  color: #74614e;
  background: transparent;
  cursor: pointer;
}

.shape-state-card button.active {
  color: #f7a146;
}

/* The key beside a name in the shape card, "Solid (S)" (#367). */
.shape-state-card button .key-hint {
  display: block;
  text-align: center;
}

.key-hint {
  opacity: 0.62;
  font-size: 0.86em;
  font-weight: 700;
  white-space: nowrap;
}

.large-solid-swatch,
.large-hole-swatch {
  display: block;
  width: 64px;
  height: 64px;
  border: 4px solid transparent;
  border-radius: 10px;
}

.large-solid-swatch {
  background: var(--swatch);
  box-shadow: inset 0 0 0 4px white;
}

.large-hole-swatch {
  background: repeating-linear-gradient(135deg, #dedede 0 7px, #b8b8b8 7px 14px);
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.55);
}

.shape-state-card button.active .large-solid-swatch,
.shape-state-card button.active .large-hole-swatch {
  border-color: #f7a046;
}

.shape-state-card button:disabled,
.range-property input:disabled {
  cursor: default;
  opacity: 0.52;
}

.color-card {
  margin: 0 10px 12px;
  padding: 13px 14px 15px;
  background: rgba(255, 255, 255, 0.98);
  border-radius: 8px;
}

.color-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  color: #5d4731;
  font-size: 15px;
  font-weight: 750;
}

.color-value {
  color: #98846f;
  font-size: 12px;
  font-weight: 600;
}

.color-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 8px;
  gap: 8px;
}

.color-grid button {
  width: 100%;
  aspect-ratio: 1;
  min-width: 0;
  padding: 0;
  background: var(--shape-swatch);
  border: 1px solid rgba(68, 50, 31, 0.22);
  border-radius: 999px;
  cursor: pointer;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5);
}

.color-grid button.selected {
  border-color: #d3710c;
  box-shadow:
    0 0 0 3px rgba(153, 83, 9, 0.22),
    inset 0 0 0 3px white;
}

.color-grid button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow:
    0 2px 7px rgba(68, 49, 28, 0.16),
    inset 0 0 0 2px rgba(255, 255, 255, 0.62);
}

.color-grid button:disabled {
  cursor: default;
  opacity: 0.5;
}

.custom-color {
  display: grid;
  grid-column: span 3;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  grid-gap: 9px;
  gap: 9px;
  min-width: 0;
  height: 32px;
  padding: 4px 10px 4px 5px;
  color: #7a6550;
  font-size: 13px;
  font-weight: 750;
  background: #fbf8f4;
  border: 1px solid #ebe1d0;
  border-radius: 999px;
  cursor: pointer;
}

.custom-color input {
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.custom-color span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-color.disabled,
.custom-color input:disabled {
  cursor: default;
  opacity: 0.55;
}

.shape-inspector .edit-sketch-button,
.shape-inspector .inspector-action-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: calc(100% - 20px);
  height: 38px;
  min-height: 38px;
  flex-shrink: 0;
  margin: 0 10px 12px;
  color: #6d4b28;
  background: #ffffff;
  border: 1px solid #d8c5b1;
  border-radius: 5px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}

.shape-inspector .edit-sketch-button:hover:not(:disabled),
.shape-inspector .inspector-action-button:hover:not(:disabled) {
  color: #98540d;
  background: #f8f4ed;
  border-color: #d1995e;
}

.shape-inspector .edit-sketch-button:disabled,
.shape-inspector .inspector-action-button:disabled {
  opacity: 0.45;
  cursor: default;
}

.shape-inspector .bent-tube-segment-actions {
  display: flex;
  gap: 8px;
  margin: 4px 0 8px;
}

.shape-inspector .bent-tube-segment-actions .inspector-action-button {
  flex: 1 1;
  width: auto;
  margin: 0;
}

.shape-inspector .bent-tube-warning {
  margin: 0 0 8px;
  color: #a3521a;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.property-card {
  margin: 0 10px 10px;
  padding: 0 14px 18px;
  background: rgba(255, 255, 255, 0.98);
  border-radius: 8px;
}

.property-card.collapsed {
  padding-bottom: 0;
}

.property-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 47px;
  padding: 0;
  color: #5d4731;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
  font-weight: 500;
  text-align: left;
}

.property-card-header svg {
  transition: transform 0.15s ease;
}

.property-card-header svg.collapsed {
  transform: rotate(180deg);
}

.property-card-header:hover {
  color: #c3731f;
}

.property-list {
  display: grid;
  grid-gap: 17px;
  gap: 17px;
}

.property-subheading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(125, 107, 88, 0.22);
  color: #7d6b58;
  font-size: 15px;
  font-weight: 650;
}

.property-subheading-action {
  padding: 3px 9px;
  border: 1px solid rgba(125, 107, 88, 0.35);
  border-radius: 7px;
  color: inherit;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.property-subheading-action:disabled {
  opacity: 0.5;
  cursor: default;
}

.gear-type-property {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  color: #7d6b58;
  font-size: 15px;
  font-weight: 650;
}

.gear-type-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 7px;
  gap: 7px;
}

.gear-type-options button {
  display: grid;
  min-width: 0;
  min-height: 84px;
  place-items: center;
  grid-gap: 3px;
  gap: 3px;
  padding: 5px 3px 7px;
  color: #7a6753;
  background: #fbf9f6;
  border: 1px solid #d8ccbe;
  border-radius: 7px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease, color 120ms ease;
}

.gear-type-options button:hover:not(:disabled) {
  color: #945717;
  background: #f9f6f1;
  border-color: #cd9860;
}

.gear-type-options button.selected {
  color: #9f560b;
  background: #f8f4ee;
  border-color: #a96b2a;
  box-shadow: 0 0 0 2px rgba(150, 77, 0, 0.12);
}

.gear-type-options button:disabled {
  cursor: default;
  opacity: 0.5;
}

.gear-type-options img {
  display: block;
  width: 62px;
  height: 62px;
  object-fit: contain;
}

/* Die gezeichneten Kacheln brauchen weniger Platz als die Rasterbilder und
   nehmen ihre Farbe aus der Schaltflaeche, damit die Auswahl mitfaerbt. */
.gear-type-options.icon-options.two-up {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gear-type-options.icon-options button {
  min-height: 74px;
}

.gear-type-options.icon-options svg {
  display: block;
  width: 44px;
  height: 44px;
  color: inherit;
  opacity: 0.85;
}

.gear-type-options.icon-options button.selected svg {
  opacity: 1;
}

/* Ein Schalter im Merkmalsfeld, etwa fuer Werte, die sich selbst einstellen. */
.check-property {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #7d6b58;
  cursor: pointer;
  font-size: 14px;
  font-weight: 650;
}

.check-property input {
  width: 16px;
  height: 16px;
  accent-color: #b3711f;
  cursor: pointer;
}

.check-property input:disabled {
  cursor: default;
}

/* A bin's four open sides as a cross seen from above: the back on top, the
   front at the bottom, left and right between. Each switch is placed by its
   side's class, named rather than counted. The columns take what room the
   panel gives, so a long label may wrap to a second line. */
.property-layout-sides {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  grid-template-areas:
    "back back"
    "left right"
    "front front";
  grid-gap: 8px 12px;
  gap: 8px 12px;
}

.property-layout-sides > .check-property-back {
  grid-area: back;
  justify-self: center;
}

.property-layout-sides > .check-property-left {
  grid-area: left;
}

.property-layout-sides > .check-property-right {
  grid-area: right;
  justify-self: end;
}

.property-layout-sides > .check-property-front {
  grid-area: front;
  justify-self: center;
}

.range-property {
  display: grid;
  grid-gap: 7px;
  gap: 7px;
  color: #867563;
  font-size: 15px;
  font-weight: 650;
}

.range-property-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.range-property-name {
  min-width: 0;
  overflow: hidden;
  color: #7d6b58;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.property-reset {
  display: inline-grid;
  width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0;
  place-items: center;
  vertical-align: -3px;
  color: #c46b12;
  background: transparent;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
}

.property-reset:hover,
.property-reset:focus-visible {
  background: #f3e3cf;
}

.property-defaults-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.property-defaults-actions button {
  flex: 1 1;
  min-height: 30px;
  padding: 0 8px;
  color: #745e48;
  font-size: 12px;
  font-weight: 700;
  background: #fff;
  border: 1px solid #d8c8b7;
  border-radius: 7px;
  cursor: pointer;
}

.property-defaults-actions button:disabled {
  cursor: default;
  opacity: 0.5;
}

html[data-theme="dark"] .property-reset {
  color: #e0a15a;
}

html[data-theme="dark"] .property-reset:hover,
html[data-theme="dark"] .property-reset:focus-visible {
  background: rgba(224, 161, 90, 0.18);
}

html[data-theme="dark"] .property-defaults-actions button {
  color: #ede4d4;
  background: #342618;
  border-color: #5b4b3a;
}

.range-value-control {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  min-width: 88px;
  min-height: 31px;
  padding: 0 7px;
  color: #7a6651;
  background: #fff;
  border: 1px solid #d8c9ba;
  border-radius: 6px;
  box-shadow: inset 0 1px 1px rgba(65, 46, 25, 0.04);
}

.range-value-control:focus-within {
  border-color: #c3792d;
  box-shadow: 0 0 0 3px rgba(161, 83, 0, 0.14);
}

.range-value-control input {
  width: 58px;
  min-width: 0;
  height: 29px;
  padding: 0;
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
  color: #57432f;
  background: transparent;
  border: 0;
  outline: 0;
  font: 750 14px/1 var(--font-ui);
  letter-spacing: 0;
  text-align: right;
}

.range-value-control input:disabled {
  cursor: default;
}

.range-value-control input::-webkit-outer-spin-button,
.range-value-control input::-webkit-inner-spin-button {
  -webkit-appearance: none;
          appearance: none;
  margin: 0;
}

.range-value-unit {
  color: #816f5d;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

/* Ein Gradzeichen sitzt am Wert und auf Hoehe der Ziffern, eine Einheit wie mm
   steht daneben und auf der Grundlinie. Die hoehere Spezifitaet ist noetig,
   weil die Kantenleiste ihre Einheiten sonst auf 10px zwingt. */
.range-value-control .range-value-unit.degree {
  margin-left: -4px;
  font-size: 13px;
  transform: translateY(-3px);
}

.edge-modifier-slider.range-property {
  margin-top: 12px;
  color: #6e5841;
  font-size: 12px;
  font-weight: 700;
}

.edge-modifier-slider .range-property-header {
  gap: 10px;
}

.edge-modifier-slider .range-property-name {
  color: #6e5841;
}

.edge-modifier-slider .range-value-control {
  min-width: 84px;
  border-color: #c4ad96;
}

.edge-modifier-slider .range-value-control input {
  width: 50px;
  font-size: 13px;
}

.edge-modifier-slider .range-value-unit {
  font-size: 10px;
}

.text-property {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  color: #867563;
  font-size: 15px;
  font-weight: 650;
}

.select-property {
  display: grid;
  /* A long label (German "Buchstabenkanten") takes the room it needs instead of running under the field. */
  grid-template-columns: minmax(92px, max-content) minmax(0, 1fr);
  align-items: center;
  grid-gap: 10px;
  gap: 10px;
  color: #867563;
  font-size: 15px;
  font-weight: 650;
}

.text-property input,
.select-property select {
  width: 100%;
  height: 31px;
  padding: 0 12px;
  color: #746352;
  font: 600 15px/1 var(--font-ui);
  letter-spacing: 0;
  background: #fff;
  border: 1px solid #daccbe;
  border-radius: 999px;
  outline: 0;
  box-shadow: inset 0 1px 1px rgba(65, 46, 25, 0.04);
}

.select-property select {
  cursor: pointer;
  /*
   * Das Feld bleibt in jedem Thema hell. Erbt es das dunkle Farbschema der
   * Seite, malt Chrome unter Linux die Zeile unter dem Mauszeiger weiss auf
   * weiss (Forum 617213, Gewindegroesse im Thema Graphit).
   */
  color-scheme: light;
}

/* Simplify mesh: the mesh as it is and as it would be, side by side over the workplane, with the target below. */
.mesh-compare {
  position: fixed;
  top: calc(var(--editor-toolbar-height, 120px) + 6px);
  left: 64px;
  bottom: 44px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  min-width: 420px;
  color: #5d4731;
  background: #fbf8f0;
  border: 1px solid #d8c5b1;
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(75, 56, 35, 0.22);
  overflow: hidden;
}

.mesh-compare-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 8px 8px 14px;
  background: #ffffff;
  border-bottom: 1px solid #e9e4dc;
}

.mesh-compare-header > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  margin-right: auto;
}

.mesh-compare-header strong {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.mesh-compare-header > div span {
  overflow: hidden;
  color: #8d7b68;
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The title bar moves the panel across the workplane, like the other tool panels. */
.mesh-compare-header.movable {
  cursor: -webkit-grab;
  cursor: grab;
  touch-action: none;
}

.mesh-compare.moving,
.mesh-compare.moving .mesh-compare-header.movable {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.mesh-compare.floating {
  min-height: 240px;
}

/* A body that came out of a group loses its parts when simplified. That is
   not a hint to notice later: it stands in the warning colour right above
   the button that does it, across the whole row. */
.mesh-compare-warning {
  display: flex;
  flex: 1 1 100%;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 8px 12px;
  color: #8a3b00;
  background: #fff4e5;
  border: 1px solid #f0a45a;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

.mesh-compare-warning svg {
  flex-shrink: 0;
}

.mesh-compare-header .guide-help-link {
  flex-shrink: 0;
}

.mesh-compare-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.mesh-compare-check input,
.mesh-compare-slider input {
  accent-color: #d07313;
}

.mesh-compare-close {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  color: inherit;
  background: transparent;
  border-radius: 5px;
  cursor: pointer;
}

.mesh-compare-close:hover {
  background: #f3ede4;
}

.mesh-compare-stage {
  position: relative;
  flex: 1 1;
  min-height: 0;
}

.mesh-compare-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: -webkit-grab;
  cursor: grab;
  touch-action: none;
}

.mesh-compare-stage canvas:active {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.mesh-compare-label {
  position: absolute;
  top: 10px;
  padding: 4px 9px;
  color: #5d4731;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #e9e4dc;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.mesh-compare-label.before {
  left: 10px;
}

.mesh-compare-label.after {
  left: calc(50% + 10px);
}

.mesh-compare-label.busy {
  opacity: 0.55;
}

.mesh-compare-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: #d8c5b1;
  pointer-events: none;
}

.mesh-compare-hint {
  position: absolute;
  left: 10px;
  bottom: 8px;
  color: #8d7b68;
  font-size: 12px;
  font-weight: 500;
  pointer-events: none;
}

.mesh-compare-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 10px 14px;
  background: #ffffff;
  border-top: 1px solid #e9e4dc;
  font-size: 13px;
  font-weight: 700;
}

.mesh-compare-slider {
  display: flex;
  flex: 1 1 220px;
  align-items: center;
  gap: 10px;
}

.mesh-compare-slider input {
  flex: 1 1;
  min-width: 120px;
}

.mesh-compare-field {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mesh-compare-field input {
  height: 32px;
  padding: 0 8px;
  color: #5d4731;
  background: #ffffff;
  border: 1px solid #d8c5b1;
  border-radius: 5px;
  font: inherit;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.mesh-compare-field.percent input {
  width: 58px;
}

.mesh-compare-field.triangles input {
  width: 96px;
}

.mesh-compare-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.mesh-compare-actions button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid #d8c5b1;
  border-radius: 5px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}

.mesh-compare-actions .secondary {
  color: #745e48;
  background: #ffffff;
}

.mesh-compare-actions .primary {
  color: #ffffff;
  background: #cc7011;
  border-color: #b35f07;
}

.mesh-compare-actions .primary:disabled {
  opacity: 0.48;
  cursor: default;
}

html[data-theme="dark"] .mesh-compare {
  color: #ddccb9;
  background: #241a11;
  border-color: #5e4c3a;
}

html[data-theme="dark"] .mesh-compare-header,
html[data-theme="dark"] .mesh-compare-footer {
  background: #2c2015;
  border-color: #5e4c3a;
}

html[data-theme="dark"] .mesh-compare-header > div span,
html[data-theme="dark"] .mesh-compare-hint {
  color: #b9a58f;
}

html[data-theme="dark"] .mesh-compare-warning {
  color: #ffc78a;
  background: #3a2511;
  border-color: #a8601f;
}

html[data-theme="dark"] .mesh-compare-close:hover {
  background: #35281b;
}

html[data-theme="dark"] .mesh-compare-label {
  color: #ddccb9;
  background: rgba(44, 32, 21, 0.9);
  border-color: #5e4c3a;
}

html[data-theme="dark"] .mesh-compare-divider {
  background: #5e4c3a;
}

html[data-theme="dark"] .mesh-compare-field input,
html[data-theme="dark"] .mesh-compare-actions .secondary {
  color: #ddccb9;
  background: #35281b;
  border-color: #5e4c3a;
}

/* Eine Zeile unter dem Feld, die die Wahl erklaert (beim Gewinde die Reihe mit Alltagsbeispielen). */
.cylinder-wrap-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: -6px 0 0;
  color: #8d7b68;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}

/* Layers of a surface texture: a tab per pattern, and one to add another. A layer that still needs faces is dashed,
   and so is the line that asks for them. */
.surface-layers {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.surface-layers button {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  min-height: 28px;
  padding: 0 9px 0 5px;
  color: #6d5133;
  font: 700 12px/1 var(--font-ui);
  background: #fbf8f4;
  border: 1px solid #e0d4c6;
  border-radius: 7px;
  cursor: pointer;
}

.surface-layers button.active {
  color: #8a4504;
  background: #ffe7cc;
  border-color: #d97813;
  box-shadow: inset 0 0 0 1px #d97813;
}

.surface-layers button.needed {
  border-style: dashed;
  border-color: #d9a24f;
}

.surface-layer-number {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: #fff;
  font-size: 11px;
  background: #b08a62;
  border-radius: 50%;
}

.surface-layers button.active .surface-layer-number {
  background: #d97813;
}

.surface-layers .surface-layer-add {
  padding-left: 7px;
  color: #8a6a45;
  background: transparent;
  border-style: dashed;
}

.cylinder-wrap-hint.surface-layer-missing {
  color: #9a5d06;
  font-weight: 700;
}

/* The vase's drawing boards (card Draw): the vase tool's boards, in the editor's colours. */
.vase-drawing {
  --accent: var(--primary);
  --surface: #fffdf9;
  --grid: #e6d6b0;
  --grid-major: #c9a45a;
  --label: #8a7a66;
  --field-edge: var(--border-strong);
  --vz-height: 300px;
}

.vase-drawing-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
}

.vase-drawing-tabs button {
  min-height: 32px;
  padding: 4px 6px;
  color: var(--muted-strong);
  background: transparent;
  font: 700 12.5px/1.2 var(--font-ui);
  cursor: pointer;
}

.vase-drawing-tabs button + button {
  border-left: 1px solid var(--border-strong);
}

.vase-drawing-tabs button[aria-pressed="true"] {
  color: #ffffff;
  background: var(--primary);
}

.vase-drawing-host .vz-hint {
  font-size: 12px;
  line-height: 1.4;
}

.vase-drawing-host[inert] {
  opacity: 0.55;
}

/* The vase's print card: weight and filament, then the core's notes on printing it. */
.vase-print-report {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}

.vase-print-weight {
  margin: 0;
  color: var(--foreground);
  font-size: 13px;
  font-weight: 700;
}

.vase-print-notes {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
  color: #8d6a3b;
  font-size: 12px;
  line-height: 1.4;
}

/* Layered text (#215): the names list and the layer colour in the layers card. */
.text-layers-body .text-layers-names {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #6c5a46;
}

.text-layers-body .text-layers-names textarea {
  width: 100%;
  min-height: 72px;
  resize: vertical;
  padding: 8px 10px;
  border: 1px solid #d9c9b0;
  border-radius: 10px;
  background: #fffdf8;
  color: #2f271d;
  font: inherit;
  font-weight: 500;
  line-height: 1.4;
}

.text-layers-body .text-layers-names textarea:focus {
  outline: 2px solid #e58a2a;
  outline-offset: 1px;
}

.text-layers-body .text-layers-names small {
  font-size: 12px;
  font-weight: 500;
  color: #8d7b68;
  line-height: 1.4;
}

html[data-theme="dark"] .text-layers-body .text-layers-names {
  color: #d8ccb8;
}

html[data-theme="dark"] .text-layers-body .text-layers-names textarea {
  border-color: #5a4d3d;
  background: #2a2520;
  color: #f1e9dc;
}

/* Name tag (#215): the way in for a plain text, the layers as a table with their corners, the key ring side, "More". */
.shape-inspector .name-tag-start {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  margin: 0 0 12px;
}

.shape-inspector .name-tag-start .name-tag-start-button {
  height: 44px;
  min-height: 44px;
  margin: 0 10px;
  color: #ffffff;
  background: #e0821f;
  border-color: #c96f12;
  font-size: 15px;
}

.shape-inspector .name-tag-start .name-tag-start-button:hover:not(:disabled) {
  color: #ffffff;
  background: #c96f12;
  border-color: #a85b0c;
}

.shape-inspector .name-tag-hint {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0 12px;
  color: #8d7b68;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}

.shape-inspector .name-tag-card > .name-tag-hint {
  margin: -2px 14px 10px;
}

.property-hint {
  margin: -8px 0 0;
  color: #8d7b68;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}

html[data-theme="dark"] .property-hint {
  color: #bfae9a;
}

.name-tag-layers-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(125, 107, 88, 0.22);
  color: #7d6b58;
  font-size: 15px;
  font-weight: 650;
}

.name-tag-stepper {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.name-tag-stepper button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: #6d4b28;
  background: #ffffff;
  border: 1px solid #d8c5b1;
  border-radius: 999px;
  cursor: pointer;
}

.name-tag-stepper button:hover:not(:disabled) {
  color: #98540d;
  border-color: #d1995e;
}

.name-tag-stepper button:disabled {
  opacity: 0.4;
  cursor: default;
}

.name-tag-stepper output {
  min-width: 18px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
}

.name-tag-layers {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}

.name-tag-layer {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr) 32px;
  align-items: center;
  grid-gap: 5px;
  gap: 5px;
}

.name-tag-layer-head {
  color: #8d7b68;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.2;
}

.name-tag-layer-head span:last-child,
.name-tag-check {
  text-align: center;
}

.name-tag-swatch {
  position: relative;
  display: block;
  width: 30px;
  height: 30px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  background: var(--swatch);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55);
  cursor: pointer;
}

.name-tag-swatch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.name-tag-measure {
  width: 100%;
  height: 30px;
  padding: 0 8px;
  color: #746352;
  font: 600 14px/1 var(--font-ui);
  background: #fff;
  border: 1px solid #daccbe;
  border-radius: 999px;
  outline: 0;
}

.name-tag-measure:focus {
  border-color: #ea953d;
  box-shadow: 0 0 0 3px rgba(161, 83, 0, 0.14);
}

.name-tag-measure:disabled {
  opacity: 0.52;
}

.name-tag-corner {
  width: 100%;
  height: 30px;
  padding: 0 2px;
  color: #746352;
  font: 600 12px/1 var(--font-ui);
  text-align: center;
  text-align-last: center;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: #fff;
  border: 1px solid #daccbe;
  border-radius: 8px;
  cursor: pointer;
  color-scheme: light;
}

.name-tag-corner:focus {
  border-color: #ea953d;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(161, 83, 0, 0.14);
}

.name-tag-sides {
  display: grid;
  grid-template-columns: 92px repeat(3, minmax(0, 1fr));
  align-items: center;
  grid-gap: 6px;
  gap: 6px;
  color: #867563;
  font-size: 15px;
  font-weight: 650;
}

.name-tag-sides.name-tag-edge {
  grid-template-columns: auto repeat(3, minmax(0, 1fr));
  gap: 5px;
  font-size: 14px;
}

.name-tag-sides.name-tag-edge > span {
  padding-right: 8px;
}

/* Centre or edge for the position fields (#973). */
.name-tag-sides.position-from {
  grid-template-columns: auto repeat(2, minmax(0, 1fr));
  margin-bottom: 4px;
  font-size: 14px;
}

.name-tag-sides.position-from > span {
  padding-right: 8px;
}

.name-tag-sides.name-tag-edge button {
  padding: 0 2px;
  font-size: 12.5px;
}

.name-tag-sides button {
  height: 30px;
  padding: 0 6px;
  color: #746352;
  background: #fff;
  border: 1px solid #daccbe;
  border-radius: 999px;
  font: 650 13px/1 var(--font-ui);
  cursor: pointer;
}

.name-tag-sides button.active {
  color: #ffffff;
  background: #e0821f;
  border-color: #c96f12;
}

.name-tag-letters {
  display: block;
  overflow: hidden;
  padding-left: 4px;
  color: #8d7b68;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.name-tag-check input {
  width: 18px;
  height: 18px;
  accent-color: #e0821f;
  cursor: pointer;
}

.name-tag-more {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 4px;
  padding: 2px 0;
  color: #98540d;
  background: transparent;
  border: 0;
  font: 700 13px/1.2 var(--font-ui);
  cursor: pointer;
}

.name-tag-more svg {
  transition: transform 0.15s ease;
}

.name-tag-more svg.open {
  transform: rotate(180deg);
}

html[data-theme="dark"] .shape-inspector .name-tag-hint,
html[data-theme="dark"] .name-tag-layer-head,
html[data-theme="dark"] .name-tag-letters {
  color: #bfae9a;
}

html[data-theme="dark"] .name-tag-layers-heading,
html[data-theme="dark"] .name-tag-sides {
  color: #d8ccb8;
}

html[data-theme="dark"] .name-tag-stepper button,
html[data-theme="dark"] .name-tag-measure,
html[data-theme="dark"] .name-tag-corner,
html[data-theme="dark"] .name-tag-sides button {
  color: #ede3d2;
  background: #231a11;
  border-color: #5c4b3a;
}

html[data-theme="dark"] .name-tag-sides button.active {
  color: #ffffff;
  background: #c96f12;
  border-color: #e0821f;
}

html[data-theme="dark"] .name-tag-more {
  color: #f0a65a;
}

html[data-theme="dark"] .shape-inspector .name-tag-start .name-tag-start-button {
  color: #ffffff;
  background: #c96f12;
  border-color: #e0821f;
}

html[data-theme="dark"] .shape-inspector .name-tag-start .name-tag-start-button:hover:not(:disabled) {
  color: #ffffff;
  background: #e0821f;
  border-color: #f0a65a;
}

.select-property-hint {
  grid-column: 2;
  margin-top: -5px;
  color: #8d7b68;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
}

/* The font picker: a field that draws the chosen font, and a list that draws every font. */
.font-picker-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 34px;
  padding: 3px 12px;
  color: #746352;
  font: 600 15px/1 var(--font-ui);
  text-align: left;
  background: #fff;
  border: 1px solid #daccbe;
  border-radius: 999px;
  outline: 0;
  cursor: pointer;
  box-shadow: inset 0 1px 1px rgba(65, 46, 25, 0.04);
}

.font-picker-button:focus-visible {
  border-color: #ea953d;
  box-shadow: 0 0 0 3px rgba(161, 83, 0, 0.14);
}

.font-picker-button:disabled {
  cursor: default;
  opacity: 0.52;
}

.font-picker-current {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
}

.font-picker-current small,
.font-picker-option small {
  flex: none;
  max-width: 45%;
  overflow: hidden;
  color: #9a8874;
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.font-preview-line {
  flex: 0 1 auto;
  min-width: 0;
  color: #5d4731;
}

.font-preview-line.empty {
  display: inline-block;
  width: 0;
}

.font-picker-list {
  position: fixed;
  z-index: 1000;
  display: grid;
  align-content: start;
  padding: 4px;
  overflow-y: auto;
  color: #5d4731;
  background: #fff;
  border: 1px solid #daccbe;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(65, 46, 25, 0.22);
}

.font-picker-group {
  padding: 8px 10px 3px;
  color: #9a8874;
  font: 700 11px/1 var(--font-ui);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.font-picker-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 36px;
  padding: 4px 10px;
  border-radius: 10px;
  cursor: pointer;
}

.font-picker-option.active {
  background: #f6e8d6;
}

.font-picker-option.selected {
  box-shadow: inset 3px 0 0 #ea953d;
}

.font-picker-option.action {
  color: #8a5a1c;
  font: 600 14px/1.2 var(--font-ui);
}

.font-picker-option.action small {
  max-width: none;
  color: inherit;
  font-size: 14px;
}

html[data-theme="dark"] .font-picker-button {
  color: #e6d8c6;
  background: #21180f;
  border-color: #5c4b3a;
}

html[data-theme="dark"] .font-picker-list {
  color: #e6d8c6;
  background: #2b2016;
  border-color: #5c4b3a;
}

html[data-theme="dark"] .font-preview-line {
  color: #f1e4d1;
}

html[data-theme="dark"] .font-picker-option.active {
  background: #3b2c1d;
}

html[data-theme="dark"] .font-picker-option.action {
  color: #f0b36a;
}

.font-manager-row .font-preview-line {
  margin-top: 2px;
}

.text-property input:focus,
.select-property select:focus {
  border-color: #ea953d;
  box-shadow: 0 0 0 3px rgba(161, 83, 0, 0.14);
}

.text-property input:disabled,
.select-property select:disabled {
  cursor: default;
  opacity: 0.52;
}

.range-control {
  position: relative;
  display: flex;
  align-items: center;
  height: 24px;
  padding: 0 3px;
}

.range-control input[type="range"] {
  width: 100%;
  height: 24px;
  margin: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
  cursor: pointer;
}

.range-control input[type="range"]::-webkit-slider-runnable-track {
  height: 5px;
  background:
    linear-gradient(to right, #d27009 0 var(--slider-pos), #e8e3da var(--slider-pos) 100%);
  border-radius: 999px;
}

.range-control input[type="range"]::-webkit-slider-thumb {
  width: 17px;
  height: 17px;
  margin-top: -6px;
  -webkit-appearance: none;
          appearance: none;
  background: #ffffff;
  border: 2px solid #d27009;
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(68, 47, 24, 0.2);
}

.range-control input[type="range"]::-moz-range-track {
  height: 5px;
  background: #e8e3da;
  border-radius: 999px;
}

.range-control input[type="range"]::-moz-range-progress {
  height: 5px;
  background: #d27009;
  border-radius: 999px;
}

.range-control input[type="range"]::-moz-range-thumb {
  width: 15px;
  height: 15px;
  background: #ffffff;
  border: 2px solid #d27009;
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(68, 47, 24, 0.2);
}

.inspector-header-icon:hover,
.shape-state-card button:not(:disabled):hover {
  background: #f9f6f1;
}

.shape-floating-controls {
  position: absolute;
  left: 50%;
  bottom: 28px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: min(460px, calc(100vw - 420px));
  max-width: calc(100vw - 420px);
  padding: 10px 12px 10px 14px;
  color: #5a3917;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #ded0c2;
  border-radius: 5px;
  box-shadow: 0 4px 18px rgba(68, 46, 22, 0.16);
  transform: translateX(-50%);
}

.shape-control-cluster {
  display: flex;
  gap: 6px;
}

.shape-control-cluster button {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #5a3917;
  background: #fcfaf7;
  border: 1px solid #ece4d6;
  border-radius: 4px;
  cursor: pointer;
}

.shape-control-cluster button:hover {
  background: #f7f3ed;
  border-color: #c4a27f;
}

.grid-settings {
  position: absolute;
  right: 12px;
  bottom: 11px;
  z-index: 6;
  color: #725b43;
  font-size: 13px;
}

/* The open snap grid menu lies over the floating panels, not behind them (#616): the corner and the properties panel it sits in are stacking contexts of their own. */
.grid-settings:has(.snap-menu),
.shape-inspector:has(.snap-menu) {
  z-index: 40;
}

.snap-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #725b43;
  font-size: 13px;
  font-weight: 500;
  line-height: 22px;
  white-space: nowrap;
}

.snap-units {
  display: inline-flex;
  margin-left: 2px;
  overflow: hidden;
  border: 1px solid currentColor;
  border-radius: 7px;
  opacity: 0.85;
}

.snap-units button {
  min-width: 26px;
  height: 20px;
  margin: 0;
  padding: 0 6px;
  color: inherit;
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 20px;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.snap-units button + button {
  border-left: 1px solid currentColor;
}

.snap-units button[aria-pressed="true"] {
  background: rgba(127, 127, 127, 0.28);
}

.snap-select {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  /* The fixed steps all fit the 75px; a measure with a name of its own may take more. */
  min-width: 75px;
  max-width: 190px;
  height: 22px;
  padding: 0 5px 0 9px;
  color: #867869;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  background: #fff;
  border: 1px solid #eae3d6;
  border-radius: 2px;
  cursor: pointer;
}

.snap-select-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.snap-select svg {
  flex-shrink: 0;
}

.snap-menu {
  position: absolute;
  right: 0;
  bottom: 26px;
  z-index: 8;
  min-width: 92px;
  width: max-content;
  padding: 4px 0;
  /* On a low window the menu scrolls instead of running off the top (#616). */
  max-height: calc(100vh - 190px);
  overflow-y: auto;
  background: white;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.snap-menu button {
  display: block;
  width: 100%;
  padding: 6px 9px;
  color: #725a42;
  text-align: left;
  background: transparent;
  cursor: pointer;
}

.snap-menu button:hover,
.snap-menu .selected {
  background: #f8f4ed;
}

.snap-object-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 7px 9px 3px;
  color: #725a42;
  font-size: 12px;
  border-top: 1px solid var(--border);
  cursor: pointer;
}

.snap-object-toggle input {
  margin: 0;
}

.workspace-modal {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  align-items: start;
  justify-items: center;
  padding-top: 36px;
  padding-bottom: 16px;
  box-sizing: border-box;
}

.workspace-modal-card {
  position: relative;
  z-index: 2;
  width: 760px;
  max-width: calc(100vw - 32px);
  /* Sized to the space the workplane leaves, not to the window: the toolbar can
     be one row or two, and the page may be zoomed, so a window-based height ran
     the dialog's footer off the bottom. */
  height: min(650px, 100%);
  max-height: 100%;
  overflow: hidden;
  color: #584026;
  background: #fff;
  border: 1px solid #dacfc2;
  border-radius: 3px;
  box-shadow: 0 16px 48px rgba(58, 42, 25, 0.28);
}

.workspace-modal-header.movable {
  cursor: -webkit-grab;
  cursor: grab;
  touch-action: none;
}

.workspace-modal-card.moving,
.workspace-modal-card.moving .workspace-modal-header.movable {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.workspace-modal-backdrop {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(63, 51, 39, 0.08);
  border: 0;
  cursor: default;
}

.workspace-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 55px;
  padding: 0 10px 0 16px;
  border-bottom: 1px solid #eae3d6;
}

.workspace-modal-header strong {
  font-size: 18px;
  font-weight: 600;
}

.workspace-modal-header button {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  color: #7a6550;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.workspace-modal-layout {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  height: calc(100% - 55px);
  min-height: 0;
}

.workspace-settings-nav {
  display: grid;
  /* One column no wider than the bar: the buttons otherwise came out 2 px too
     wide between 641 and 1100 px and the bar grew a horizontal scrollbar. */
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  grid-gap: 6px;
  gap: 6px;
  min-height: 0;
  padding: 16px 10px;
  overflow-x: hidden;
  overflow-y: auto;
  background: #faf7f3;
  border-right: 1px solid #eae3d6;
}

.workspace-settings-nav button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  color: #7e6852;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
}

.workspace-settings-nav button:hover {
  color: #614527;
  background: #f5f0e8;
}

.workspace-settings-nav button.active {
  color: #955717;
  background: #ffffff;
  border-color: #ddccb9;
  box-shadow: 0 1px 3px rgba(84, 58, 31, 0.08);
}

.workspace-modal-content {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.workspace-modal-body {
  display: grid;
  align-content: start;
  grid-gap: 20px;
  gap: 20px;
  min-height: 0;
  padding: 22px 24px;
  overflow: auto;
}

.workspace-section-heading {
  display: grid;
  grid-gap: 5px;
  gap: 5px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f0eae0;
}

.workspace-section-heading strong {
  color: #543b21;
  font-size: 17px;
}

.workspace-section-heading span {
  color: #756656;
  font-size: 12px;
  font-weight: 650;
}

.workspace-row,
.workspace-toggle,
.workspace-printer-info {
  margin: -4px 0 4px;
  color: #756656;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

.bed-overhang-warning {
  position: fixed;
  bottom: 44px;
  left: 50%;
  /* Below the windows (.workspace-modal is 30): it lay over the settings (#640). */
  z-index: 29;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: min(640px, calc(100vw - 32px));
  padding: 8px 6px 8px 14px;
  color: #8a3b00;
  font-size: 13px;
  font-weight: 700;
  background: #fff4e5;
  border: 1px solid #f0a45a;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(80, 45, 10, 0.14);
  transform: translateX(-50%);
  pointer-events: none;
}

.bed-overhang-warning svg {
  flex: none;
  color: #d86a00;
}

.bed-overhang-dismiss {
  display: grid;
  flex: none;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
}

.bed-overhang-dismiss:hover,
.bed-overhang-dismiss:focus-visible {
  background: rgba(216, 106, 0, 0.14);
}

.bed-overhang-dismiss svg {
  color: inherit;
}

.workspace-select {
  display: grid;
  grid-template-columns: 145px 1fr;
  align-items: center;
  grid-gap: 8px;
  gap: 8px;
  /* No min-height: the settings body is a grid of a fixed height, which gives an auto row only its minimum, so a
     label that wraps to two lines ran over the next row. */
  font-size: 14px;
  font-weight: 700;
}

.workspace-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  grid-column-gap: 16px;
  column-gap: 16px;
  margin: -8px 0 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0eae0;
}

.workspace-toggle-copy {
  display: grid;
  min-width: 0;
  grid-gap: 5px;
  gap: 5px;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.5;
}

.workspace-toggle-copy small {
  color: #756656;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.45;
}

.workspace-toggle input {
  justify-self: end;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: #bf6508;
}

.workspace-toggle.is-disabled .workspace-toggle-copy {
  opacity: 0.5;
}

.workspace-grid-color-row {
  align-items: start;
}

.workspace-grid-color-row > span {
  padding-top: 10px;
}

.workspace-color-control {
  position: relative;
  display: grid;
  width: min(100%, 286px);
  justify-self: end;
  grid-gap: 8px;
  gap: 8px;
}

.workspace-color-trigger {
  display: grid;
  width: 100%;
  height: 42px;
  grid-template-columns: 28px minmax(0, 1fr) 16px;
  align-items: center;
  grid-gap: 10px;
  gap: 10px;
  padding: 0 11px;
  color: #644d35;
  background: #fcfaf7;
  border: 1px solid #daccbe;
  border-radius: 9px;
  cursor: pointer;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-align: left;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.workspace-color-trigger:disabled {
  cursor: default;
  opacity: 0.5;
}

.workspace-color-trigger:not(:disabled):hover,
.workspace-color-trigger[aria-expanded="true"] {
  background: #ffffff;
  border-color: #c38441;
  box-shadow: 0 0 0 3px rgba(147, 81, 10, 0.11);
}

.workspace-color-trigger svg {
  justify-self: end;
  transition: transform 150ms ease;
}

.workspace-color-trigger svg.open {
  transform: rotate(180deg);
}

.workspace-color-swatch {
  width: 26px;
  height: 26px;
  border: 2px solid #ffffff;
  border-radius: 7px;
  box-shadow: 0 0 0 1px rgba(83, 62, 39, 0.24), 0 2px 5px rgba(70, 50, 28, 0.18);
}

.workspace-color-popover {
  position: fixed;
  z-index: 100;
  width: 286px;
  visibility: hidden;
  display: grid;
  grid-gap: 12px;
  gap: 12px;
  padding: 13px;
  background: #ffffff;
  border: 1px solid #dbcdbf;
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(67, 46, 24, 0.2);
}

.workspace-hex-color-picker.react-colorful {
  width: 100%;
  height: 176px;
}

.workspace-hex-color-picker .react-colorful__saturation {
  border-bottom: 0;
  border-radius: 8px 8px 4px 4px;
}

.workspace-hex-color-picker .react-colorful__hue {
  height: 14px;
  margin-top: 10px;
  border-radius: 999px;
}

.workspace-hex-color-picker .react-colorful__pointer {
  width: 18px;
  height: 18px;
  border-width: 3px;
  box-shadow: 0 1px 5px rgba(58, 40, 20, 0.3);
}

.workspace-color-presets {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 8px;
  gap: 8px;
}

.workspace-color-presets button {
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  border: 2px solid #ffffff;
  border-radius: 7px;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(77, 57, 35, 0.2);
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.workspace-color-presets button:hover {
  transform: translateY(-1px);
}

.workspace-color-presets button.selected {
  box-shadow: 0 0 0 2px #bd670e, 0 0 0 5px rgba(132, 73, 10, 0.14);
}

.workspace-color-popover-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  grid-gap: 8px;
  gap: 8px;
}

.workspace-color-popover-footer label {
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  height: 38px;
  overflow: hidden;
  color: #97846f;
  background: #fbf8f4;
  border: 1px solid #d9cdbf;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
}

.workspace-color-popover-footer label > span {
  text-align: center;
}

.workspace-color-popover-footer input {
  min-width: 0;
  height: 100%;
  padding: 0 10px;
  color: #584129;
  background: #ffffff;
  border: 0;
  border-left: 1px solid #eae2d5;
  outline: 0;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.workspace-color-reset {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: #775f46;
  background: #fbf8f4;
  border: 1px solid #d9cdbf;
  border-radius: 8px;
  cursor: pointer;
}

.workspace-color-reset:hover {
  color: #a65908;
  background: #f8f4ee;
  border-color: #c99764;
}

.workspace-range {
  display: grid;
  grid-template-columns: 145px 1fr;
  grid-gap: 8px;
  gap: 8px;
  align-items: start;
  padding-bottom: 14px;
  border-bottom: 1px solid #f0eae0;
  font-size: 14px;
  font-weight: 700;
}

.workspace-range input {
  width: 100%;
  accent-color: #cf710f;
}

/* A select's line beneath it says what the chosen option does (the mouse buttons, #1013). */
.workspace-range small,
.workspace-select > small {
  grid-column: 2;
  display: flex;
  justify-content: space-between;
  color: #756657;
  font-size: 12px;
  font-weight: 700;
}

.workspace-history-setting {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
  max-width: 560px;
}

.workspace-history-range-control {
  padding: 4px 8px 0;
}

.workspace-history-range-control input {
  width: 100%;
  accent-color: #cf710f;
}

.workspace-history-labels {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  color: #756656;
  font-size: 11px;
  font-weight: 750;
  text-align: center;
}

.workspace-history-labels .active {
  color: #9f5508;
}

.workspace-history-custom {
  display: grid;
  grid-template-columns: 145px minmax(120px, 180px);
  grid-gap: 12px;
  gap: 12px;
  align-items: center;
  color: #5e4429;
  font-size: 13px;
  font-weight: 750;
}

.workspace-history-custom input {
  min-width: 0;
  padding: 8px 10px;
  color: #503820;
  background: #fff;
  border: 1px solid #baa793;
  border-radius: 6px;
  font: inherit;
}

.workspace-history-note {
  margin: 2px 0 0;
  color: #756656;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.45;
}

.workspace-select select {
  width: 100%;
  height: 26px;
  padding: 0 26px 0 8px;
  color: #61482f;
  background: #fff;
  border: 1px solid #dacfc2;
  border-radius: 2px;
  font-weight: 700;
}

/* Custom snap grids: a short list of name, size and what steps that gives. */
.workspace-custom-snap {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid #f0eae0;
}

.workspace-custom-snap-heading {
  display: grid;
  grid-gap: 2px;
  gap: 2px;
  font-size: 14px;
}

.workspace-custom-snap-heading strong {
  font-weight: 700;
}

.workspace-custom-snap-heading span {
  color: #756656;
  font-size: 12px;
  font-weight: 650;
}

.workspace-custom-snap-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, auto) 26px;
  align-items: center;
  grid-gap: 8px;
  gap: 8px;
}

.workspace-custom-snap-row label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
}

.workspace-custom-snap-row input {
  width: 100%;
  height: 26px;
  padding: 0 8px;
  color: #61482f;
  background: #fff;
  border: 1px solid #dacfc2;
  border-radius: 2px;
  font-weight: 700;
}

.workspace-custom-snap-row label input {
  width: 70px;
  text-align: right;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.workspace-custom-snap-steps {
  color: #756656;
  font-size: 11px;
  font-weight: 650;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.workspace-custom-snap-row button,
.workspace-custom-snap-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 26px;
  color: #61482f;
  background: #fff;
  border: 1px solid #dacfc2;
  border-radius: 2px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}

.workspace-custom-snap-add {
  justify-self: start;
  padding: 0 10px;
}

.workspace-custom-snap-row button:hover,
.workspace-custom-snap-add:hover {
  background: #f8f4ed;
  border-color: #d1995e;
}

html[data-theme="dark"] .workspace-custom-snap {
  border-color: #4a3a2a;
}

html[data-theme="dark"] .workspace-custom-snap-heading span,
html[data-theme="dark"] .workspace-custom-snap-steps {
  color: #b9a58f;
}

html[data-theme="dark"] .workspace-custom-snap-row input,
html[data-theme="dark"] .workspace-custom-snap-row button,
html[data-theme="dark"] .workspace-custom-snap-add {
  color: #ddccb9;
  background: #35281b;
  border-color: #5e4c3a;
}

html[data-theme="dark"] .workspace-custom-snap-row button:hover,
html[data-theme="dark"] .workspace-custom-snap-add:hover {
  background: #403021;
}

.workspace-divider {
  border: 0;
  border-top: 1px solid #f0eae0;
  margin: 4px 0 8px;
}

.workspace-dimensions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 80px;
  gap: 80px;
  margin-left: 153px;
}

.workspace-dimensions label {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  color: #7a6550;
  font-size: 13px;
  font-weight: 600;
}

.workspace-dimensions input {
  width: 80px;
  height: 34px;
  padding: 0 7px;
  color: #563e24;
  background: #fff;
  border: 1px solid #dacfc2;
  border-radius: 2px;
  font-weight: 600;
}

.workspace-shape-picker {
  display: grid;
  grid-template-columns: 145px minmax(0, 1fr);
  align-items: center;
  grid-gap: 8px;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
}

.workspace-shape-picker-control {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  grid-gap: 10px;
  gap: 10px;
}

.workspace-shape-picker-control img {
  width: 38px;
  height: 38px;
  padding: 4px;
  object-fit: contain;
  background: #faf7f2;
  border: 1px solid #e9e1d3;
  border-radius: 8px;
}

.workspace-shape-picker-control select {
  width: 100%;
  height: 38px;
  padding: 0 30px 0 10px;
  color: #61482f;
  background: #fff;
  border: 1px solid #dacfc2;
  border-radius: 5px;
  font-weight: 750;
}

.workspace-shape-card {
  display: grid;
  grid-gap: 18px;
  gap: 18px;
  padding: 18px;
  background: #fcfbf8;
  border: 1px solid #ede6da;
  border-radius: 10px;
}

.workspace-shape-card-heading,
.workspace-shape-limit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.workspace-shape-card-heading > span,
.workspace-shape-limit > span {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
}

.workspace-shape-card-heading strong,
.workspace-shape-limit strong {
  color: #5b4227;
  font-size: 14px;
}

.workspace-shape-card-heading small,
.workspace-shape-limit small,
.workspace-shape-dimensions small,
.workspace-shape-specials small {
  color: #776757;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.35;
}

.workspace-shape-card-heading button {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px;
  color: #72583d;
  background: #fff;
  border: 1px solid #dacfc2;
  border-radius: 5px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
}

.workspace-shape-card-heading button:disabled {
  cursor: default;
  opacity: 0.48;
}

/* "Reset grid" at the end of the Workplane page (#503), a button like the one of the shape defaults. */
.workspace-reset-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 14px;
  color: #7a6550;
  border-top: 1px solid #f0eae0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

.workspace-reset-row button {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px;
  color: #72583d;
  background: #fff;
  border: 1px solid #dacfc2;
  border-radius: 5px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
}

html[data-theme="dark"] .workspace-reset-row {
  color: #cbbba6;
  border-top-color: #4a3b2c;
}

html[data-theme="dark"] .workspace-reset-row button {
  color: #e1ceba;
  background: #35281b;
  border-color: #5d4d3c;
}

.workspace-shape-dimensions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.workspace-shape-dimensions label {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  color: #7a6550;
  font-size: 12px;
  font-weight: 600;
}

.workspace-shape-specials {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid #ede6da;
}

.workspace-shape-specials-heading {
  display: grid;
  grid-gap: 3px;
  gap: 3px;
}

.workspace-shape-specials-heading strong {
  color: #5b4227;
  font-size: 13px;
}

.workspace-shape-special-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.workspace-shape-special-fields label {
  display: grid;
  min-width: 0;
  grid-gap: 6px;
  gap: 6px;
  color: #7a6550;
  font-size: 12px;
  font-weight: 600;
}

.workspace-shape-dimensions input,
.workspace-shape-special-fields input,
.workspace-shape-special-fields select,
.workspace-shape-limit input {
  width: 100%;
  min-width: 0;
  height: 36px;
  padding: 0 9px;
  color: #563e24;
  background: #fff;
  border: 1px solid #d7cbbe;
  border-radius: 5px;
  font-weight: 600;
}

.workspace-shape-limit {
  padding-top: 16px;
  border-top: 1px solid #ede6da;
}

.workspace-shape-limit input {
  width: 132px;
  flex: 0 0 132px;
}

/* The hint "App limits" has to fit the narrow field without the bold, large type of a typed value. */
.workspace-shape-limit input {
  font-size: 14px;
}

.workspace-shape-limit input::placeholder {
  font-size: 12px;
  font-weight: 600;
}

.workspace-shape-note {
  margin: -4px 0 0;
  color: #907b66;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.5;
}

/* The hint gives way to the buttons: it wraps its own words, and only when it would be narrower
   than 160px do the buttons move to a row of their own (#1045). */
.workspace-footer-hint {
  flex: 1 1 160px;
}

.workspace-footer-buttons {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
}

/* A label on one line: the buttons had a fixed height and wrapped "Meine Vorgabe verwenden" out of it
   on the Mac's wider Avenir Next (#1045). */
.make-default-button {
  min-width: 128px;
  min-height: 34px;
  padding: 6px 14px;
  white-space: nowrap;
  color: #584026;
  background: #fcfaf7;
  border: 1px solid #eae2d4;
  border-radius: 3px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}

.workspace-modal-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  min-height: 64px;
  padding: 12px 24px;
  color: #756656;
  background: #f6f2ed;
  border-top: 1px solid #efe8dd;
  font-size: 12px;
  font-weight: 700;
}

.workspace-modal-header button:hover,
.make-default-button:hover {
  background: #f9f6f1;
}

.shape-scroll {
  height: calc(100vh - 230px);
  padding: 0 4px 18px 9px;
  overflow-y: auto;
  scrollbar-color: #aaaaaa #d0d0d0;
  scrollbar-width: thin;
}

.shape-scroll::-webkit-scrollbar {
  width: 8px;
}

.shape-scroll::-webkit-scrollbar-track {
  background: #d0d0d0;
}

.shape-scroll::-webkit-scrollbar-thumb {
  background: #aaaaaa;
  border-radius: 8px;
}

.shape-grid {
  display: grid;
  grid-template-columns: repeat(3, 82px);
  grid-gap: 11px 5px;
  gap: 11px 5px;
}

.shape-tile {
  position: relative;
  display: grid;
  width: 82px;
  height: 92px;
  place-items: center;
  overflow: visible;
  background: var(--tile);
  border: 1px solid transparent;
  cursor: -webkit-grab;
  cursor: grab;
  transition: background 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.shape-tile:hover {
  background: var(--tile-hover);
  border-color: #efe8dd;
  box-shadow: 0 4px 12px rgba(68, 49, 28, 0.14);
  transform: translateY(-1px);
}

.shape-tile img {
  display: block;
  width: 70px;
  height: 70px;
  object-fit: contain;
  pointer-events: none;
}

.shape-size-tag {
  position: absolute;
  left: 50%;
  bottom: -25px;
  padding: 2px 7px;
  color: #5d4731;
  font-size: 11px;
  white-space: nowrap;
  background: #fff;
  border: 1px solid #dacbbc;
  border-radius: 2px;
  box-shadow: var(--shadow);
  transform: translateX(-50%);
}

.shape-mini-tools {
  position: absolute;
  left: 50%;
  top: -31px;
  display: flex;
  overflow: hidden;
  border: 1px solid #dacbbc;
  border-radius: 2px;
  box-shadow: var(--shadow);
  transform: translateX(-50%);
}

.shape-mini-tools button {
  width: 26px;
  height: 25px;
  color: #5d4731;
  font-size: 15px;
  line-height: 23px;
  background: #fff;
  border-right: 1px solid #ede6d9;
  cursor: pointer;
}

.shape-mini-tools button:last-child {
  border-right: 0;
}

.shape-mini-tools button:hover {
  background: #f9f6f1;
}

@media (max-width: 1240px) {
  .shape-menu-dropdown {
    position: fixed;
    top: var(--editor-toolbar-height);
    left: 10px;
    /* Auch im schmalen Fenster so viele Spalten, wie hineinpassen. */
    width: min(672px, calc(100vw - 20px));
    /* Das Menue beginnt unter der (evtl. zweizeiligen) Leiste, also muss die
       Hoehe von dort bis zum sichtbaren Fensterende reichen. dvh statt vh,
       weil iPad-Safari mit vh die eingeblendeten Leisten mitzaehlt und das
       Listenende sonst ausserhalb des Bildschirms liegt. */
    max-height: calc(100vh - var(--editor-toolbar-height) - 10px);
    max-height: calc(100dvh - var(--editor-toolbar-height) - 10px);
    display: flex;
    flex-direction: column;
  }

  .shape-menu-dropdown .shape-menu-list,
  .shape-menu-dropdown .shape-menu-body {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .shape-menu-dropdown .shape-menu-body .shape-menu-list {
    flex: none;
  }

  .workspace-modal {
    padding-top: 18px;
  }

  .workspace-modal-card {
    width: min(760px, calc(100vw - 24px));
    height: 100%;
    max-height: 100%;
  }

  .workspace-modal-layout {
    grid-template-columns: 165px minmax(0, 1fr);
  }

  .workspace-settings-nav {
    padding-inline: 8px;
  }

  .workspace-settings-nav button {
    padding-inline: 9px;
  }

  .workspace-modal-body,
  .workspace-modal-footer {
    padding-inline: 18px;
  }

  .workplane-plane {
    inset: 0;
  }

  .grid-settings {
    right: 12px;
  }

  .shape-floating-controls {
    left: 86px;
    right: 18px;
    min-width: 0;
    max-width: none;
    transform: none;
  }

  .shape-inspector {
    right: 0;
    width: min(320px, calc(100vw - 18px));
  }
}

@media (max-width: 640px) {
  .workspace-modal {
    padding-top: 12px;
  }

  .workspace-modal-card {
    width: calc(100vw - 16px);
    height: 100%;
    max-height: 100%;
  }

  .workspace-modal-layout {
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
  }

  .workspace-settings-nav {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 3px;
    padding: 7px;
    border-right: 0;
    border-bottom: 1px solid #eae3d6;
  }

  .workspace-settings-nav button {
    display: grid;
    min-height: 52px;
    place-items: center;
    grid-gap: 3px;
    gap: 3px;
    padding: 5px 2px;
    font-size: 9px;
    line-height: 1.15;
    text-align: center;
  }

  .workspace-modal-body {
    padding: 16px;
  }

  .workspace-modal-footer {
    padding-inline: 16px;
  }

  .action-buttons button {
    width: calc(43px * var(--toolbar-scale));
    min-width: calc(43px * var(--toolbar-scale));
    padding: 0;
  }

  .action-buttons .action-icon-button {
    width: calc(43px * var(--toolbar-scale));
    min-width: calc(43px * var(--toolbar-scale));
  }


  .camera-controls {
    left: 7px;
    transform: scale(0.86);
    transform-origin: top left;
  }

  .workplane-plane {
    inset: 0;
  }

  .shape-floating-controls {
    left: 58px;
    right: 18px;
    bottom: 82px;
  }

  .shape-inspector {
    top: 12px;
    right: 12px;
    left: 70px;
    width: auto;
  }

  .color-grid {
    grid-template-columns: repeat(5, 24px);
    gap: 7px;
  }

  .color-grid button {
    width: 24px;
    height: 24px;
  }

  html[data-theme="dark"] .workspace-settings-nav {
    border-bottom-color: #544434;
  }
}

html[data-theme="dark"] {
  --background: #1f1912;
  --foreground: #f5f0e8;
  --topbar: #2b2116;
  --subbar: #32271b;
  --panel: #2d2217;
  --tile: #33271b;
  --tile-hover: #413222;
  --border: #504030;
  --border-strong: #655340;
  --muted: #7a6652;
  --muted-strong: #826e5a;
  --nav-text: #ece2d0;
  --shadow: 0 3px 12px rgba(0, 0, 0, 0.32);

  /* Toolbar surface, dark. The filament colours stay as they are - they read on
     both grounds - only the surface and the neutral key colour move. */
  --toolbar-bg: #2b2116;
  --toolbar-edge: #44382c;
  --toolbar-divider: rgba(64, 52, 40, 0.7);
  --toolbar-label: #99846f;
  --toolbar-icon: #f0e7d9;
  --toolbar-icon-disabled: #58493a;
  --toolbar-tile: #33271b;
  --toolbar-hover-bg: rgba(255, 255, 255, 0.08);
  --toolbar-hover-ring: rgba(130, 111, 90, 0.5);
  --group-neutral: #99846f;
}

html[data-theme="dark"] .toolbar-icon.active {
  background: color-mix(in srgb, var(--group-color) 22%, #2b2116);
}

html[data-theme="dark"] .move-dimension-line {
  stroke: #f1eadd;
  filter: drop-shadow(0 1px 1px rgba(18, 10, 2, 0.72));
}

html[data-theme="dark"] .move-dimension-guides marker path {
  fill: #f1eadd;
}

html[data-theme="dark"] .move-dimension-projection {
  stroke: rgba(242, 231, 220, 0.38);
}

html[data-theme="dark"] .dimension-label.origin-dimension-value {
  background: rgba(16, 36, 48, 0.92);
  border: 1px solid rgba(143, 212, 240, 0.5);
  color: #8fd4f0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] body,
html[data-theme="dark"] .dashboard-shell,
html[data-theme="dark"] .layerling-editor,
html[data-theme="dark"] .editor-body,
html[data-theme="dark"] .workplane-stage {
  color: var(--foreground);
  background: var(--background);
}

/* The 3D canvas lies on this, and normally covers it - but it is sized from a
   measurement, so any moment where the two disagree (a panel opening, a window
   being dragged, the first frame after a resize) showed the light ground as a
   white block. It has to be dark here for the same reason the stage is. */
html[data-theme="dark"] .workplane-plane {
  background: var(--background);
}

html[data-theme="dark"] .editor-loading-screen {
  background: #201810;
}

html[data-theme="dark"] .editor-skeleton-shimmer {
  background: #524130;
}

html[data-theme="dark"] .editor-skeleton-shimmer::after {
  background: linear-gradient(
    105deg,
    transparent 18%,
    rgba(175, 140, 102, 0.08) 38%,
    rgba(229, 209, 188, 0.28) 50%,
    rgba(175, 140, 102, 0.08) 62%,
    transparent 82%
  );
}

html[data-theme="dark"] .editor-loading-toolbar {
  background: #2e2318;
  border-color: #4f4030;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .editor-loading-tool-groups {
  background: #30251a;
  border-color: #4f4030;
}

html[data-theme="dark"] .editor-loading-tool-section {
  background: linear-gradient(90deg, rgba(86, 70, 52, 0.34), rgba(59, 45, 31, 0.16) 44%, rgba(21, 15, 8, 0.14));
  border-color: #524333;
}

html[data-theme="dark"] .editor-loading-viewport {
  background-color: #201810;
  background-image:
    linear-gradient(rgba(122, 100, 77, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122, 100, 77, 0.12) 1px, transparent 1px);
}

html[data-theme="dark"] .editor-loading-viewport::after {
  background: radial-gradient(ellipse, rgba(110, 84, 56, 0.12), transparent 68%);
}

html[data-theme="dark"] .editor-loading-model span {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] .editor-loading-viewport-controls {
  background: rgba(48, 36, 24, 0.9);
  border-color: #5b4b3a;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.34);
}

html[data-theme="dark"] .dashboard-topbar {
  color: #f3ede3;
  background: #241a11;
  border-bottom: 1px solid #514130;
  box-shadow: none;
}

html[data-theme="dark"] .dashboard-action-tile,
html[data-theme="dark"] .project-card,
html[data-theme="dark"] .dashboard-select,
html[data-theme="dark"] .dashboard-segmented,
html[data-theme="dark"] .project-empty,
html[data-theme="dark"] .project-card-menu,
html[data-theme="dark"] .dashboard-confirm-dialog {
  color: #eee4d4;
  background: #2d2217;
  border-color: #514130;
}

html[data-theme="dark"] .dashboard-brand,
html[data-theme="dark"] .dashboard-section-header h1,
html[data-theme="dark"] .project-card-title,
html[data-theme="dark"] .project-empty strong,
html[data-theme="dark"] .dashboard-confirm-dialog header strong,
html[data-theme="dark"] .dashboard-confirm-dialog p span {
  color: #f3ede3;
}

html[data-theme="dark"] .dashboard-legal {
  border-top-color: #514130;
}

html[data-theme="dark"] .dashboard-legal a {
  color: #a89179;
}

html[data-theme="dark"] .editor-status {
  color: #ede4d4;
  background: rgba(40, 30, 20, 0.97);
  border-color: #5b4b3a;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.34);
}

html[data-theme="dark"] .store-trail button {
  color: #f3a452;
}

html[data-theme="dark"] .project-card-folder {
  color: #f3a452;
  background: #332619;
  border-color: #4a3821;
}

html[data-theme="dark"] .project-card-folder:hover,
html[data-theme="dark"] .project-card-folder:focus-visible {
  color: #ffc383;
  background: #3a2c16;
  border-color: #6b4f27;
}

html[data-theme="dark"] .store-trail button:hover:not(:disabled) {
  background: #3a2c16;
}

html[data-theme="dark"] .store-trail button:disabled {
  color: #bda78e;
}

html[data-theme="dark"] .server-folder-preview {
  color: #f3a452;
  background: #332619;
  border-color: #6b5326;
}

html[data-theme="dark"] .dashboard-rename-dialog .dashboard-dialog-problem {
  color: #f0956a;
}

html[data-theme="dark"] .project-card.drop-target {
  border-color: #f3a452;
  box-shadow: 0 0 0 2px rgba(243, 164, 82, 0.3);
}

html[data-theme="dark"] .project-card.drop-target .server-folder-preview,
html[data-theme="dark"] .store-trail button.drop-target:not(:disabled) {
  color: #ffc98a;
  background: #40301d;
  border-color: #f3a452;
}

html[data-theme="dark"] .store-trail button.drop-target:not(:disabled) {
  box-shadow: inset 0 0 0 1px #f3a452;
}

html[data-theme="dark"] .support-nudge {
  background: var(--panel);
  border-color: #6a4a26;
}

html[data-theme="dark"] .install-app-hint {
  background: #33230f;
  border-color: #d9863a;
  box-shadow: none;
}

html[data-theme="dark"] .support-nudge-icon {
  color: #f3a452;
  background: #3a2c16;
}

html[data-theme="dark"] .support-nudge-text strong {
  color: #f3ede3;
}

html[data-theme="dark"] .support-nudge-text span,
html[data-theme="dark"] .support-nudge-close {
  color: #bda78e;
}

html[data-theme="dark"] .support-nudge-close:hover {
  color: #f3ede3;
  background: #3a2c16;
}

html[data-theme="dark"] .install-app-hint-text strong {
  color: #fbeed9;
}

html[data-theme="dark"] .install-app-hint-text span,
html[data-theme="dark"] .install-app-hint-close,
html[data-theme="dark"] .install-app-hint-later {
  color: #e2cfb6;
}

html[data-theme="dark"] .install-app-hint-close:hover,
html[data-theme="dark"] .install-app-hint-later:hover {
  color: #fbeed9;
  background: #4a3318;
}

html[data-theme="dark"] .dashboard-legal-dot {
  color: #6f5c48;
}

html[data-theme="dark"] .dashboard-legal a.dashboard-legal-sponsor {
  border-color: #6b5326;
  background: #3a2c16;
  color: #f3a452;
}

html[data-theme="dark"] .dashboard-legal a.dashboard-legal-sponsor:hover {
  border-color: #f3a452;
  background: #4a3820;
  color: #f7b978;
}

html[data-theme="dark"] .dashboard-legal a.dashboard-legal-update {
  border-color: #2e6634;
  background: #17311b;
  color: #78d482;
}

html[data-theme="dark"] .dashboard-legal a.dashboard-legal-update:hover {
  border-color: #78d482;
  background: #1f4224;
  color: #93e69b;
}

html[data-theme="dark"] .tab-presence-notice {
  border-color: #7a5a1c;
  background: #2b2210;
  color: #f3d89a;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .tab-presence-icon {
  color: #e6b450;
}

html[data-theme="dark"] .tab-presence-reload {
  border-color: #7a5a1c;
  background: #3a2e14;
  color: #f3d89a;
}

html[data-theme="dark"] .tab-presence-reload:hover,
html[data-theme="dark"] .tab-presence-reload:focus-visible {
  background: #4a3a18;
}

html[data-theme="dark"] .dashboard-update-notice {
  border-color: #2e6634;
  background: #152918;
  color: #a4e5ab;
}

html[data-theme="dark"] .dashboard-update-icon {
  color: #78d482;
}

html[data-theme="dark"] .dashboard-update-link {
  color: #78d482;
}

html[data-theme="dark"] .dashboard-update-link:hover {
  color: #9eedab;
}

html[data-theme="dark"] .dashboard-update-dismiss {
  color: #6fa675;
}

html[data-theme="dark"] .dashboard-update-dismiss:hover {
  background: #204025;
  color: #a4e5ab;
}

html[data-theme="dark"] .dashboard-update-preview-toggle {
  color: #78d482;
}

html[data-theme="dark"] .dashboard-update-preview-toggle:hover {
  color: #9eedab;
}

html[data-theme="dark"] .dashboard-update-preview-body {
  border-top-color: #2e6634;
}

html[data-theme="dark"] .dashboard-update-preview .whats-new-version h2 {
  color: #78d482;
}

html[data-theme="dark"] .store-move-targets button {
  color: #eee4d4;
}

html[data-theme="dark"] .store-move-targets button:hover,
html[data-theme="dark"] .store-move-targets button:focus-visible {
  color: #f3a452;
  background: #3a2c16;
}

html[data-theme="dark"] .dashboard-section-subtitle,
html[data-theme="dark"] .project-card-meta,
html[data-theme="dark"] .dashboard-import-notice,
html[data-theme="dark"] .dashboard-confirm-dialog p {
  color: #a89179;
}

html[data-theme="dark"] .project-card-meta-loading {
  color: #f59e0b;
}

html[data-theme="dark"] .project-preview-loading {
  background: rgba(0, 0, 0, 0.58);
  color: #ffffff;
}

html[data-theme="dark"] .dashboard-rename-dialog input,
html[data-theme="dark"] .dashboard-confirm-cancel,
html[data-theme="dark"] .dashboard-confirm-dialog header button {
  color: #f0e7d9;
  background: #231a11;
  border-color: #5d4c3a;
}

html[data-theme="dark"] .dashboard-topbar .dashboard-brand,
html[data-theme="dark"] .dashboard-brand-name {
  color: #f3ede3;
}

html[data-theme="dark"] .dashboard-brand .dashboard-tagline {
  color: #a89179;
}

html[data-theme="dark"] .dashboard-topbar .dashboard-search {
  color: #a89179;
  background: #2d2217;
  border-color: #514130;
}

html[data-theme="dark"] .dashboard-topbar .dashboard-search input {
  color: #f3ede3;
  background: transparent;
  border: 0;
}

html[data-theme="dark"] .dashboard-select,
html[data-theme="dark"] .dashboard-segmented button,
html[data-theme="dark"] .project-menu-trigger {
  color: #b7a089;
}

html[data-theme="dark"] .project-card-menu button:hover,
html[data-theme="dark"] .project-card-menu button:focus-visible {
  color: #f3a452;
  background: rgba(183, 100, 11, 0.2);
}

html[data-theme="dark"] .project-menu-trigger {
  background: rgba(40, 30, 20, 0.95);
  border-color: #5b4b3b;
}

html[data-theme="dark"] .dashboard-action-tile.create {
  color: #f7f3ec;
}

html[data-theme="dark"] .dashboard-action-tile:not(.create) .dashboard-action-icon {
  color: #d5c2af;
  background: transparent;
}

html[data-theme="dark"] .project-preview {
  background: #3c2e20;
}

html[data-theme="dark"] .secondary-toolbar,
html[data-theme="dark"] .toolbar-mode-content,
html[data-theme="dark"] .sketch-toolbar-ribbon {
  color: #ece2d0;
  background: #30251a;
  border-color: #4f4030;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 1px 3px rgba(0, 0, 0, 0.25);
}

html[data-theme="dark"] .toolbar-project-name-field {
  background: transparent;
}

html[data-theme="dark"] .toolbar-project-name-field input {
  color: #f3ede2;
  background: #2a2016;
  border-color: #56452f;
}

html[data-theme="dark"] .toolbar-project-name-field:hover input,
html[data-theme="dark"] .toolbar-project-name-field input:focus {
  background: #322616;
  border-color: #d97a17;
}

html[data-theme="dark"] .toolbar-section,
html[data-theme="dark"] .toolbar-mode-content,
html[data-theme="dark"] .toolbar-brand-name {
  color: #f3ede3;
}

html[data-theme="dark"] .toolbar-brand-tagline {
  color: #a89179;
}

html[data-theme="dark"] .toolbar-workspace-tabs {
  border-color: #524333;
}

html[data-theme="dark"] .toolbar-icon,
html[data-theme="dark"] .shape-menu-trigger,
html[data-theme="dark"] .toolbar-workspace-tabs button,
html[data-theme="dark"] .toolbar-section-label {
  color: #c0a890;
}

html[data-theme="dark"] .toolbar-icon:not(.disabled):hover,
html[data-theme="dark"] .shape-menu-trigger:hover,
html[data-theme="dark"] .shape-menu-trigger.active,
html[data-theme="dark"] .toolbar-workspace-tabs button:hover {
  color: #f7f2ea;
  background: #463727;
}

html[data-theme="dark"] .toolbar-title-home {
  color: #e3d3c0;
}

html[data-theme="dark"] .toolbar-title-home:hover:not(:disabled) {
  background: #463727;
}

html[data-theme="dark"] .shape-menu-dropdown,
html[data-theme="dark"] .visibility-dropdown,
html[data-theme="dark"] .top-action-panel,
html[data-theme="dark"] .edge-modifier-panel,
html[data-theme="dark"] .split-panel,
html[data-theme="dark"] .camera-controls,
html[data-theme="dark"] .tape-tool-popover,
html[data-theme="dark"] .section-tool-popover,
html[data-theme="dark"] .snap-menu {
  color: #ede4d4;
  background: rgba(40, 30, 20, 0.97);
  border-color: #5b4b3a;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.34);
}

html[data-theme="dark"] .visibility-dropdown-action {
  color: #f0e7d9;
  background: #413121;
  border-color: #65503b;
}

html[data-theme="dark"] .visibility-dropdown-action:hover:not(:disabled),
html[data-theme="dark"] .visibility-dropdown-action:focus-visible {
  color: #f9f7f2;
  background: #533e29;
  border-color: #85694b;
}

html[data-theme="dark"] .visibility-dropdown-action:disabled {
  color: #897663;
  background: #322619;
  border-color: #534333;
}

html[data-theme="dark"] .visibility-dropdown-help {
  color: #a79079;
}

html[data-theme="dark"] .visibility-dropdown-help kbd {
  color: #f1eadd;
  background: #322518;
  border-color: #635241;
}

html[data-theme="dark"] .shape-menu-item,
html[data-theme="dark"] .top-action-body button,
html[data-theme="dark"] .top-action-body .open-lyl-project-button,
html[data-theme="dark"] .top-action-body .import-drop-zone,
html[data-theme="dark"] .edge-modifier-target,
html[data-theme="dark"] .edge-modifier-quick-actions button,
html[data-theme="dark"] .edge-modifier-footer .secondary,
html[data-theme="dark"] .edge-modifier-field select,
html[data-theme="dark"] .split-axis-control button,
html[data-theme="dark"] .split-position-value input,
html[data-theme="dark"] .split-position-pick:not(.active),
html[data-theme="dark"] .split-panel-footer .secondary {
  color: #ddccb9;
  background: #35281b;
  border-color: #5e4c3a;
}

html[data-theme="dark"] .workspace-printer-info {
  color: #b9a58f;
}

html[data-theme="dark"] .bed-overhang-warning {
  color: #ffc78a;
  background: #3a2511;
  border-color: #a8601f;
}

html[data-theme="dark"] .shell-opening-options button {
  color: #ddccb9;
  background: #35281b;
  border-color: #5a4633;
}

html[data-theme="dark"] .shell-opening-options button.active {
  color: #ffb866;
  background: #4a3217;
  border-color: #c7772a;
}

html[data-theme="dark"] .edge-modifier-history-actions {
  background: #2a2015;
  border-color: #53412f;
}

html[data-theme="dark"] .edge-modifier-error,
html[data-theme="dark"] .split-panel-error {
  color: #ff9da5;
  background: rgba(85, 23, 30, 0.85);
  border-color: #9f3842;
}

html[data-theme="dark"] .split-panel-target {
  color: #e7c896;
  background: #2a2015;
  border-color: #53412f;
}

html[data-theme="dark"] .split-axis-control button.active,
html[data-theme="dark"] .split-panel-footer .primary {
  color: #fff;
  background: #cc7011;
  border-color: #d07313;
}

html[data-theme="dark"] .edge-modifier-history-actions button {
  color: #e7c896;
  background: #35281b;
  border-color: #5e4c3a;
}

html[data-theme="dark"] .edge-modifier-history-actions button:disabled {
  color: #8a7967;
  background: #2f2418;
  border-color: #4a3b2b;
}

html[data-theme="dark"] .edge-modifier-history-edit {
  color: #e7c896;
  background: #35281b;
  border-color: #5e4c3a;
}

html[data-theme="dark"] .edge-modifier-history-edit:hover {
  background: #3f301f;
}

html[data-theme="dark"] .edge-modifier-history-actions span,
html[data-theme="dark"] .edge-modifier-history-hint,
html[data-theme="dark"] .edge-modifier-history-item small {
  color: #a79078;
}

html[data-theme="dark"] .edge-modifier-history-item strong {
  color: #f0d3a6;
}

html[data-theme="dark"] .edge-modifier-history-warning {
  color: #f3a452;
}

html[data-theme="dark"] .shape-inspector .bent-tube-warning {
  color: #f3a452;
}

html[data-theme="dark"] .shape-menu-item:hover,
html[data-theme="dark"] .top-action-body button:hover,
html[data-theme="dark"] .top-action-body .import-drop-zone:hover,
html[data-theme="dark"] .edge-modifier-header button:hover,
html[data-theme="dark"] .snap-menu button:hover,
html[data-theme="dark"] .snap-menu .selected {
  background: #463625;
}

html[data-theme="dark"] .shape-menu-item .sketch-shape-menu-icon {
  color: #d8c4ae;
  background: linear-gradient(145deg, #48392a, #372a1d);
  border-color: #655340;
}

html[data-theme="dark"] .camera-controls button,
html[data-theme="dark"] .snap-menu button,
html[data-theme="dark"] .snap-object-toggle,
html[data-theme="dark"] .snap-row {
  color: #d5c4b3;
}

html[data-theme="dark"] .camera-controls button:hover {
  color: #f9f7f2;
  background: rgba(84, 66, 46, 0.9);
  border-color: #79634c;
}

html[data-theme="dark"] .section-tool-popover .section-toggle-btn {
  border-color: #554433;
  background: #372a1e;
  color: #bfaea0;
}

html[data-theme="dark"] .section-tool-popover .section-popover-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

html[data-theme="dark"] .section-label {
  color: #a89787;
}

html[data-theme="dark"] .section-axis-buttons {
  background: #2f2317;
}

html[data-theme="dark"] .section-tool-popover .section-axis-btn {
  color: #baa99a;
}

html[data-theme="dark"] .section-tool-popover .section-axis-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

html[data-theme="dark"] .section-tool-popover .section-axis-btn.active {
  background: #463727;
  color: #ff9d3b;
}

html[data-theme="dark"] .section-tool-popover .section-flip-btn {
  border-color: #554433;
  background: #36291d;
  color: #baa99a;
}

html[data-theme="dark"] .section-tool-popover .section-flip-btn:hover {
  background: #463727;
  color: #ffffff;
}

html[data-theme="dark"] .section-tool-popover .section-flip-btn.active {
  background: #4d3319;
  border-color: #bd6a17;
  color: #ff9d3b;
}

html[data-theme="dark"] .section-slider::-webkit-slider-runnable-track {
  background: #4a3c2e;
}

html[data-theme="dark"] .section-slider::-moz-range-track {
  background: #4a3c2e;
}

html[data-theme="dark"] .section-number-wrap {
  background: #33271b;
  border-color: #554433;
}

html[data-theme="dark"] .section-popover-footer {
  border-top-color: #4a3a2a;
}

html[data-theme="dark"] .section-tool-popover .section-action-btn {
  border-color: #554433;
  background: #36291d;
  color: #baa99a;
}

html[data-theme="dark"] .section-tool-popover .section-action-btn:hover {
  background: #463727;
  color: #ffffff;
}

html[data-theme="dark"] .section-checkbox-label {
  color: #a89787;
}

html[data-theme="dark"] .section-measure-row {
  border-top-color: #4a3a2a;
}

html[data-theme="dark"] .section-measure-readout strong {
  color: #f0e7d9;
}

html[data-theme="dark"] .section-measure-readout span,
html[data-theme="dark"] .section-measure-help {
  color: #a89787;
}

html[data-theme="dark"] .section-measure-outline {
  stroke: #4ba3ec;
}

html[data-theme="dark"] .shape-inspector {
  color: #ece2d1;
  background: rgba(39, 30, 20, 0.97);
  border-color: #534333;
  box-shadow: -3px 0 14px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .shape-inspector {
  scrollbar-color: #5a4a3a transparent;
}

html[data-theme="dark"] .shape-inspector::-webkit-scrollbar-thumb {
  background: #5a4a3a;
}

html[data-theme="dark"] .shape-inspector::-webkit-scrollbar-thumb:hover {
  background: #6e5c49;
}

html[data-theme="dark"] .shape-inspector.floating {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .shape-inspector .edit-sketch-button,
html[data-theme="dark"] .shape-inspector .inspector-action-button {
  color: #ede3d2;
  background: #231a11;
  border-color: #5c4b3a;
}

html[data-theme="dark"] .shape-inspector .edit-sketch-button:hover:not(:disabled),
html[data-theme="dark"] .shape-inspector .inspector-action-button:hover:not(:disabled) {
  color: #f5efe5;
  background: #3b2c1d;
  border-color: #81684f;
}

html[data-theme="dark"] .shape-inspector-header,
html[data-theme="dark"] .shape-state-card,
html[data-theme="dark"] .color-card,
html[data-theme="dark"] .property-card,
html[data-theme="dark"] .shape-floating-controls,
html[data-theme="dark"] .shape-mini-tools {
  color: #ece2d1;
  background: rgba(48, 37, 25, 0.98);
  border-color: #564534;
}

html[data-theme="dark"] .property-card-header,
html[data-theme="dark"] .color-card-header {
  color: #efe7d8;
}

html[data-theme="dark"] .check-property,
html[data-theme="dark"] .property-subheading,
html[data-theme="dark"] .gear-type-property,
html[data-theme="dark"] .range-property,
html[data-theme="dark"] .range-property-name,
html[data-theme="dark"] .text-property,
html[data-theme="dark"] .select-property,
html[data-theme="dark"] .range-value-unit,
html[data-theme="dark"] .color-value {
  color: #b9a188;
}

html[data-theme="dark"] .cylinder-wrap-hint,
html[data-theme="dark"] .select-property-hint {
  color: #a08a72;
}

html[data-theme="dark"] .surface-layers button {
  color: #ede4d4;
  background: #2f2418;
  border-color: #53412f;
}

html[data-theme="dark"] .surface-layers button.active {
  color: #ffc27a;
  background: #4a3214;
  border-color: #e08a2c;
  box-shadow: inset 0 0 0 1px #e08a2c;
}

html[data-theme="dark"] .surface-layers .surface-layer-add {
  color: #e7c896;
  background: transparent;
}

html[data-theme="dark"] .cylinder-wrap-hint.surface-layer-missing {
  color: #f0b13c;
}

html[data-theme="dark"] .vase-print-notes {
  color: #d1a96f;
}

html[data-theme="dark"] .vase-drawing {
  --surface: #2a2017;
  --grid: #43362a;
  --grid-major: #6e5638;
  --label: #b39d84;
}

html[data-theme="dark"] .gear-type-options button {
  color: #bea892;
  background: #21180f;
  border-color: #5c4b3a;
}

html[data-theme="dark"] .gear-type-options button:hover:not(:disabled) {
  color: #f5efe5;
  background: #3b2c1d;
  border-color: #81684f;
}

html[data-theme="dark"] .gear-type-options button.selected {
  color: #ee9538;
  background: #322313;
  border-color: #cc8031;
  box-shadow: 0 0 0 2px rgba(155, 98, 37, 0.14);
}

html[data-theme="dark"] .transform-guides line {
  stroke: rgba(234, 221, 207, 0.86);
}

html[data-theme="dark"] .transform-guides #dimension-arrow path {
  fill: rgba(244, 233, 222, 0.94);
}

html[data-theme="dark"] .rotate-handle {
  --rotate-handle-ink: #ffffff;
  --rotate-handle-halo: rgba(28, 24, 20, 0.9);
}

html[data-theme="dark"] .rotate-handle.axis-x { --rotate-handle-axis: #ff6b70; }
html[data-theme="dark"] .rotate-handle.axis-y { --rotate-handle-axis: #5fd47c; }
html[data-theme="dark"] .rotate-handle.axis-z { --rotate-handle-axis: #6aa0ff; }
html[data-theme="dark"] .transform-handle.axis-x { background: #ff6b70; border-color: #7d1a1e; }
html[data-theme="dark"] .transform-handle.axis-y { background: #5fd47c; border-color: #17542a; }
html[data-theme="dark"] .transform-handle.axis-z { background: #6aa0ff; border-color: #163f86; }

html[data-theme="dark"] .transform-handle.height-lift {
  border-bottom-color: #ffffff;
}

html[data-theme="dark"] .transform-handle.height-lift.lower {
  border-top-color: #ffffff;
}

html[data-theme="dark"] .transform-handle.height-lift:hover {
  border-bottom-color: var(--hover-accent-color);
}

html[data-theme="dark"] .transform-handle.height-lift.lower:hover {
  border-bottom-color: transparent;
  border-top-color: var(--hover-accent-color);
}

html[data-theme="dark"] .transform-overlay.locked {
  --locked-handle-ink: #7d7368;
  --locked-handle-fill: #4a4037;
}

html[data-theme="dark"] .transform-lock-badge {
  color: #c9bfb3;
  background: rgba(28, 24, 20, 0.9);
}

html[data-theme="dark"] .inspector-snap-dock {
  background: linear-gradient(180deg, rgba(39, 30, 20, 0), rgba(39, 30, 20, 0.98) 18px, rgba(39, 30, 20, 0.98));
  border-color: #534333;
}

html[data-theme="dark"] .property-card-header:hover,
html[data-theme="dark"] .shape-control-cluster button:hover,
html[data-theme="dark"] .inspector-header-icon:hover,
html[data-theme="dark"] .shape-state-card button:not(:disabled):hover {
  background: #453626;
}

html[data-theme="dark"] .range-value-control,
html[data-theme="dark"] .range-value-control input,
html[data-theme="dark"] .snap-select,
html[data-theme="dark"] .shape-control-cluster button {
  color: #ede3d2;
  background: #231a11;
  border-color: #5c4b3a;
}

html[data-theme="dark"] .workspace-modal-card {
  color: #eee6d7;
  background: #2a2015;
  border-color: #5a4a3a;
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .workspace-modal-content,
html[data-theme="dark"] .workspace-modal-body,
html[data-theme="dark"] .workspace-modal-footer {
  color: #a79078;
  background: #2a2015;
}

html[data-theme="dark"] .workspace-modal-body,
html[data-theme="dark"] .export-dialog-body {
  scrollbar-color: #796652 #2a2015;
}

html[data-theme="dark"] .workspace-modal-body::-webkit-scrollbar,
html[data-theme="dark"] .export-dialog-body::-webkit-scrollbar {
  width: 10px;
}

html[data-theme="dark"] .workspace-modal-body::-webkit-scrollbar-track,
html[data-theme="dark"] .export-dialog-body::-webkit-scrollbar-track {
  background: #2a2015;
}

html[data-theme="dark"] .workspace-modal-body::-webkit-scrollbar-thumb,
html[data-theme="dark"] .export-dialog-body::-webkit-scrollbar-thumb {
  background: #796652;
  border: 2px solid #2a2015;
  border-radius: 999px;
}

html[data-theme="dark"] .workspace-modal-backdrop {
  background: rgba(12, 8, 3, 0.48);
}

html[data-theme="dark"] .workspace-modal-header,
html[data-theme="dark"] .workspace-section-heading,
html[data-theme="dark"] .workspace-toggle,
html[data-theme="dark"] .workspace-range,
html[data-theme="dark"] .workspace-modal-footer {
  border-color: #544434;
}

html[data-theme="dark"] .workspace-settings-nav {
  background: #231a11;
  border-color: #544434;
}

html[data-theme="dark"] .workspace-settings-nav button,
html[data-theme="dark"] .workspace-dimensions label,
html[data-theme="dark"] .workspace-range small,
html[data-theme="dark"] .workspace-select > small,
html[data-theme="dark"] .workspace-history-labels,
html[data-theme="dark"] .workspace-history-note,
html[data-theme="dark"] .workspace-toggle-copy small,
html[data-theme="dark"] .workspace-section-heading span {
  color: #9f866c;
}

html[data-theme="dark"] .workspace-settings-nav button:hover {
  color: #f1e9dc;
  background: #3c2e20;
}

html[data-theme="dark"] .workspace-settings-nav button.active {
  color: #f0973a;
  background: #3b2c1d;
  border-color: #68533d;
  box-shadow: none;
}

html[data-theme="dark"] .workspace-section-heading strong,
html[data-theme="dark"] .workspace-history-custom {
  color: #f1eade;
}

html[data-theme="dark"] .workspace-select select,
html[data-theme="dark"] .workspace-dimensions input,
html[data-theme="dark"] .workspace-history-custom input,
html[data-theme="dark"] .workspace-shape-picker-control select,
html[data-theme="dark"] .workspace-shape-dimensions input,
html[data-theme="dark"] .workspace-shape-special-fields input,
html[data-theme="dark"] .workspace-shape-special-fields select,
html[data-theme="dark"] .workspace-shape-limit input {
  color: #efe7d8;
  background: #21180f;
  border-color: #5d4d3c;
}

html[data-theme="dark"] .workspace-shape-picker-control img,
html[data-theme="dark"] .workspace-shape-card {
  background: #231a11;
  border-color: #544434;
}

html[data-theme="dark"] .workspace-shape-card-heading strong,
html[data-theme="dark"] .workspace-shape-limit strong,
html[data-theme="dark"] .workspace-shape-specials-heading strong {
  color: #f1eade;
}

html[data-theme="dark"] .workspace-shape-card-heading small,
html[data-theme="dark"] .workspace-shape-limit small,
html[data-theme="dark"] .workspace-shape-dimensions label,
html[data-theme="dark"] .workspace-shape-dimensions small,
html[data-theme="dark"] .workspace-shape-special-fields label,
html[data-theme="dark"] .workspace-shape-specials small,
html[data-theme="dark"] .workspace-shape-note {
  color: #9f866c;
}

html[data-theme="dark"] .workspace-shape-card-heading button {
  color: #e1ceba;
  background: #35281b;
  border-color: #5d4d3c;
}

html[data-theme="dark"] .workspace-shape-limit,
html[data-theme="dark"] .workspace-shape-specials {
  border-color: #544434;
}

html[data-theme="dark"] .workspace-color-trigger {
  color: #ede4d4;
  background: #21180f;
  border-color: #5d4d3c;
}

html[data-theme="dark"] .workspace-color-trigger:hover,
html[data-theme="dark"] .workspace-color-trigger[aria-expanded="true"] {
  background: #342618;
  border-color: #96714a;
  box-shadow: 0 0 0 3px rgba(176, 113, 46, 0.11);
}

html[data-theme="dark"] .workspace-color-swatch,
html[data-theme="dark"] .workspace-color-presets button {
  border-color: #f0e8da;
  box-shadow: 0 0 0 1px rgba(17, 12, 7, 0.8);
}

html[data-theme="dark"] .workspace-color-popover {
  background: #251b11;
  border-color: #5d4c3b;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.44);
}

html[data-theme="dark"] .workspace-color-popover-footer label,
html[data-theme="dark"] .workspace-color-reset {
  color: #a99179;
  background: #322518;
  border-color: #5d4c3b;
}

html[data-theme="dark"] .workspace-color-popover-footer input {
  color: #f1eadd;
  background: #1e160d;
  border-color: #5d4c3b;
}

html[data-theme="dark"] .workspace-color-reset:hover {
  color: #f0973a;
  background: #423120;
  border-color: #96714a;
}

html[data-theme="dark"] .make-default-button {
  color: #efe7d8;
  background: #35281b;
  border-color: #5d4d3c;
}

html[data-theme="dark"] .workspace-modal-header button:hover,
html[data-theme="dark"] .make-default-button:hover {
  background: #463625;
}

html[data-theme="dark"] .toolbar-section {
  background: linear-gradient(90deg, #3e3225, #352a1e 48%, #433629);
  border-color: #645546;
}

html[data-theme="dark"] .toolbar-section-label,
html[data-theme="dark"] .toolbar-subgroup-label {
  color: #d4c6b7;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.72);
}

html[data-theme="dark"] .toolbar-workspace-tabs button.active {
  color: #f6f1e8;
  background: #403325;
  border-bottom-color: #d97a17;
}

html[data-theme="dark"] .sketch-workspace-stage {
  background: #201810;
}

html[data-theme="dark"] .sketch-revolve-preview {
  background: rgba(43, 30, 17, 0.97);
  border-color: rgba(108, 81, 53, 0.8);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.38);
}

html[data-theme="dark"] .sketch-revolve-preview-title {
  color: #dfc5aa;
}

html[data-theme="dark"] .sketch-revolve-preview canvas {
  background: radial-gradient(circle at 50% 48%, rgba(70, 51, 31, 0.98), rgba(32, 22, 12, 0.98));
}

html[data-theme="dark"] .sketch-revolve-preview-empty {
  color: #b19476;
}

html[data-theme="dark"] .sketch-plate-background {
  fill: #3a2918;
}

html[data-theme="dark"] .sketch-revolve-guide rect {
  fill: rgba(15, 9, 3, 0.38);
}

html[data-theme="dark"] .sketch-plate-border {
  stroke: #b67027;
}

html[data-theme="dark"] .sketch-grid .minor {
  stroke: rgba(153, 110, 64, 0.34);
}

html[data-theme="dark"] .sketch-grid .major {
  stroke: rgba(188, 122, 52, 0.58);
}

html[data-theme="dark"] .sketch-grid .axis {
  stroke: #d98a38;
}

html[data-theme="dark"] .sketch-dimension-extension {
  stroke: rgba(240, 214, 186, 0.45);
}

html[data-theme="dark"] .sketch-dimension-line {
  stroke: #f0d6ba;
}

html[data-theme="dark"] .sketch-dimension-arrow {
  fill: #f0d6ba;
}

html[data-theme="dark"] .sketch-dimension-pill.clickable:hover rect {
  fill: #2e2418;
  stroke: #ffa726;
  stroke-width: 1.5;
}

html[data-theme="dark"] .sketch-dimension-pill.clickable:hover text {
  fill: #ffb74d;
}

html[data-theme="dark"] .sketch-command-button {
  color: #d7c7b6;
}

html[data-theme="dark"] .sketch-command-button.primary {
  color: #ec8d2b;
}

html[data-theme="dark"] .sketch-command-button.cancel {
  color: #f08d98;
}

html[data-theme="dark"] .sketch-command-button:hover:not(:disabled) {
  color: #f9f7f2;
  background: #4d3b29;
  border-color: #745d46;
}

html[data-theme="dark"] .sketch-command-button.disabled,
html[data-theme="dark"] .sketch-command-button:disabled {
  color: #a58d75;
  opacity: 0.54;
}

html[data-theme="dark"] .sketch-point-actions {
  background: rgba(30, 26, 22, 0.94);
  border-color: #443a30;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .sketch-point-actions button {
  color: #cbd5e0;
}

html[data-theme="dark"] .sketch-selection-position {
  color: #cbd5e0;
}

html[data-theme="dark"] .sketch-selection-position input {
  color: #f7fafc;
  background: #1e1a16;
  border-color: #554438;
}

html[data-theme="dark"] .sketch-point-actions button:hover,
html[data-theme="dark"] .sketch-point-actions button.active {
  color: #f7fafc;
  background: #2d241e;
  border-color: #554438;
}

html[data-theme="dark"] .sketch-point-divider {
  background: #443a30;
}

html[data-theme="dark"] .sketch-corner-label {
  color: #cbd5e0;
}

html[data-theme="dark"] .sketch-corner-input {
  color: #f7fafc;
  background: #1e1a16;
  border-color: #443a30;
}

html[data-theme="dark"] .sketch-corner-input:focus {
  border-color: #ed8936;
  box-shadow: 0 0 0 2px rgba(237, 137, 54, 0.2);
}

html[data-theme="dark"] .sketch-corner-unit {
  color: #a0aec0;
}

html[data-theme="dark"] .sketch-corner-submit {
  color: #68d391;
  background: rgba(46, 125, 50, 0.25);
}

html[data-theme="dark"] .sketch-corner-submit:hover {
  background: rgba(46, 125, 50, 0.4);
  color: #9ae6b4;
}

html[data-theme="dark"] .sketch-corner-cancel {
  color: #a0aec0;
}

html[data-theme="dark"] .sketch-corner-cancel:hover {
  background: #2d241e;
  color: #f7fafc;
}


/* Only the sprites need rescuing here: their colours are baked into an image
   file and cannot follow the theme. The drawn marks do follow it, through
   --toolbar-icon, so brightening them on top would only wash them out. */
html[data-theme="dark"] .toolbar-icon:not(.disabled) .toolbar-sprite-icon,
html[data-theme="dark"] .toolbar-icon:not(.disabled) .vector-toolbar-sprite-icon,
html[data-theme="dark"] .shape-menu-trigger .vector-toolbar-sprite-icon,
html[data-theme="dark"] .action-buttons button .vector-toolbar-sprite-icon {
  filter: grayscale(0.72) brightness(1.65) contrast(0.92) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.55));
  opacity: 0.96;
}

html[data-theme="dark"] .toolbar-icon.disabled .toolbar-sprite-icon,
html[data-theme="dark"] .toolbar-icon.disabled .vector-toolbar-sprite-icon {
  filter: grayscale(1) brightness(1.4);
  opacity: 0.24;
}

/* A drawn mark is light on this ground, so hovering has to lift it rather than
   deepen it the way it does on white. */
html[data-theme="dark"] .toolbar-icon:not(.disabled):hover .toolbar-vector-art-icon {
  filter: contrast(1.05) brightness(1.12) drop-shadow(0 0 5px rgba(214, 121, 22, 0.32));
}

html[data-theme="dark"] .toolbar-icon:not(.disabled):hover .toolbar-sprite-icon,
html[data-theme="dark"] .toolbar-icon:not(.disabled):hover .vector-toolbar-sprite-icon,
html[data-theme="dark"] .shape-menu-trigger:hover .vector-toolbar-sprite-icon {
  filter: grayscale(0.35) brightness(1.85) contrast(1) drop-shadow(0 0 5px rgba(214, 121, 22, 0.32));
}

html[data-theme="dark"] .action-buttons button {
  color: #ddcdbb;
  background: #34291d;
  border-color: #615243;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .shape-menu-title,
html[data-theme="dark"] .export-action-panel header,
html[data-theme="dark"] .import-action-panel header {
  color: #f0e7d9;
  background: linear-gradient(180deg, #3c2f22, #31261a);
  border-color: #594a3a;
}

html[data-theme="dark"] .import-action-panel .top-action-body {
  background: #281e14;
}

html[data-theme="dark"] .export-dialog-body {
  background: #281e14;
}

html[data-theme="dark"] .export-setting-section,
html[data-theme="dark"] .export-dialog-footer {
  background: #302418;
  border-color: #544434;
}

html[data-theme="dark"] .export-file-section label,
html[data-theme="dark"] .export-section-heading strong,
html[data-theme="dark"] .export-format-summary strong {
  color: #f0e7d9;
}

html[data-theme="dark"] .export-file-input-wrap {
  background: #21180f;
  border-color: #5d4d3c;
}

html[data-theme="dark"] .export-file-input-wrap:focus-within {
  background: #251b11;
  border-color: #a8631b;
}

html[data-theme="dark"] .export-file-input {
  color: #efe7d8;
}

html[data-theme="dark"] .print-estimate-material {
  color: #efe7d8;
  background: #21180f;
  border-color: #5d4d3c;
}

html[data-theme="dark"] .print-estimate-values dd {
  color: #f0e7d9;
}

html[data-theme="dark"] .print-estimate-settings label,
html[data-theme="dark"] .print-estimate-values dt,
html[data-theme="dark"] .print-estimate-busy,
html[data-theme="dark"] .print-estimate-note {
  color: #9f866c;
}

html[data-theme="dark"] .print-estimate-infill {
  color: #c0a888;
}

html[data-theme="dark"] .export-file-input-wrap > span,
html[data-theme="dark"] .export-section-heading > div > span,
html[data-theme="dark"] .export-format-summary span,
html[data-theme="dark"] .export-dialog-footer .export-linked-file,
html[data-theme="dark"] .export-format-summary p {
  color: #9f866c;
}

html[data-theme="dark"] .export-scope-badge {
  color: #ed963c;
  background: #3d2915;
  border-color: #6a4a28;
}

html[data-theme="dark"] .export-format-slider,
html[data-theme="dark"] .export-format-summary {
  background: #251b11;
  border-color: #544434;
}

html[data-theme="dark"] .export-format-slider::before {
  background: #473726;
  border-color: #986e43;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .export-format-slider button {
  color: #9f866c;
}

html[data-theme="dark"] .export-format-slider button:hover {
  color: #f0e7d9;
}

html[data-theme="dark"] .export-format-slider button[aria-checked="true"] {
  color: #f09639;
}

html[data-theme="dark"] .grid-settings {
  color: #b39b83;
}

/* Explicit grid areas keep Create beside the brand instead of on a third row. */
@media (max-width: 860px) {
  .dashboard-topbar {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    padding-block: 9px;
  }
}

@media (max-width: 520px) {
  .dashboard-topbar {
    gap: 7px 9px;
    padding: 7px 9px;
  }

  .dashboard-brand img {
    width: 38px;
    height: 38px;
  }

  .dashboard-brand-name {
    font-size: 19px;
  }

  .dashboard-search {
    height: 38px;
  }
}

@media (max-width: 380px) {
  .dashboard-brand-text {
    display: none;
  }
}

/* Das Menueband traegt neun Gruppen. Zwischen Laptop und breitem Schirm passen
   sie nicht mehr in voller Groesse nebeneinander - bisher wurde die letzte
   Gruppe einfach abgeschnitten, jetzt gehen die Symbole eine Stufe zurueck.
   Gemessen (Breite von der linken Kante der ersten bis zur rechten der letzten
   Gruppe, mit Lupen-, Anleitungs-, Kuerzel- und Hilfeknopf und "Flaeche
   loeschen" und "Huelle"): in voller Groesse braucht das Band 2172 px, in der
   mittleren Stufe 1842 px, in der kleinen 1690 px (24.10.2026, #863). Ohne
   "Huelle" passten 2081, 1765 und 1615 px. Ohne "Flaeche loeschen" waren es
   2038, 1728 und 1582 px, ohne den Knopf der Interaktiven Hilfe 1990, 1688
   und 1544 px: Jeder neue Knopf verschiebt alle drei Schwellen um das, was
   er braucht - neu messen. */
@media (max-width: 2180px) {
  :root {
    --toolbar-icon-size: calc(37px * var(--toolbar-scale));
  }

  .toolbar-section-tools {
    margin-inline: 3px;
    padding-inline: 3px;
  }

  .toolbar-section .action-buttons {
    margin-inline: 3px;
    padding-inline: 4px;
  }

  .action-buttons {
    gap: 3px;
    padding-inline: 4px;
  }
}

@media (max-width: 1850px) {
  :root {
    --toolbar-icon-size: calc(34px * var(--toolbar-scale));
  }

  .toolbar-section {
    min-width: auto;
  }

  .toolbar-section-label {
    padding-inline: 7px;
    font-size: 10px;
  }
}

/* Below the width even the smallest step needs (1690 px, measured with the
   command search, guide, shortcuts, Interactive Help, Delete face and Hull buttons;
   the middle step needs 1842 px and the full size 2172 px) the groups wrap onto a
   further row instead of scrolling sideways: a scrolling bar hides tools and
   cuts off every menu that hangs beneath it. The bar grows, and the editor
   passes its real height on (see --editor-toolbar-height). A new button in
   the bar moves all three thresholds up: measure again. */
@media (max-width: 1698px) {
  .toolbar-mode-content,
  .sketch-toolbar-ribbon {
    flex-wrap: wrap;
    height: auto;
  }

  .toolbar-mode-content .tool-group {
    display: contents;
  }
}

/* Die Kurzanleitung teilt sich die Karte mit der Kuerzelliste; nur die
   Aufzaehlung ist ihre eigene. */
.guide-section ul {
  display: grid;
  grid-gap: 7px;
  gap: 7px;
  margin: 0;
  padding-left: 17px;
  list-style: disc outside;
}

.guide-section li {
  color: #6c5a48;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.45;
}

.guide-section li::marker {
  color: var(--filament-cobalt);
}

html[data-theme="dark"] .guide-section li {
  color: #cbbba6;
}

html[data-theme="dark"] .workspace-divider {
  border-top-color: #383129;
}

html[data-theme="dark"] .theme-switch-button {
  color: #a89179;
}

html[data-theme="dark"] .theme-switch-button:hover,
html[data-theme="dark"] .theme-switch-button:focus-visible,
html[data-theme="dark"] .theme-switch-button.active {
  color: #f3ede3;
  background: #40301d;
}

html[data-theme="dark"] .theme-dropdown-menu {
  background: #251b11;
  border-color: #4a3825;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .theme-dropdown-item {
  color: #c9b49e;
}

html[data-theme="dark"] .theme-dropdown-item:hover,
html[data-theme="dark"] .theme-dropdown-item:focus-visible {
  color: #f5eee4;
  background: #38291a;
}

html[data-theme="dark"] .theme-dropdown-item.active {
  color: #f3a452;
  background: #312316;
}

html[data-theme="dark"] .theme-check {
  color: #f3a452;
}

/* Die Kameraleiste ist mit den beiden Notizknoepfen (31.10.2026) um zwei Knoepfe laenger geworden, und die Flaeche eines 900 Pixel hohen Fensters
   ist rund 750 hoch: Bei Normalgroesse lief sie unten ins Fussband. Bis 900 Pixel wird sie darum schon verkleinert, wie unter 780. */
@media (min-height: 781px) and (max-height: 900px) {
  .camera-controls {
    transform: scale(0.88);
    transform-origin: top left;
  }
}

/* Ein flaches Fenster - ein iPad quer, in Safari mit Adress-, Lesezeichen- und
   Tableiste - laesst der Arbeitsflaeche kaum vierhundert Pixel. Die
   Kameraleiste braucht aufgerecht rund 380 davon und lief deshalb unten aus dem
   Bild. Hier rueckt sie hoeher und wird etwas kleiner; die Hoehe ist gemeint,
   nicht die Breite, und genau daran hing es: Die einzige Regel dafuer war an
   die Breite geknuepft und griff auf einem breiten, flachen Fenster nie. */
@media (max-height: 780px) {
  /* Der Wuerfel ist hier kleiner, also rueckt das Statusfenster mit - sonst
     stuende es mit einer Handbreit Abstand daneben statt neben ihm. */
  .editor-status {
    top: calc(var(--editor-toolbar-height) + 18px);
    left: 90px;
  }

  .camera-controls {
    top: 96px;
    transform: scale(0.88);
    transform-origin: top left;
  }
}

/* Noch flacher, und Verkleinern hilft nicht mehr: Bei achtzig Prozent waeren
   die Schaltflaechen 34 Pixel gross - auf einem Geraet, das mit dem Finger
   bedient wird, zu klein. Stattdessen stellt sich die Leiste zweispaltig, dann
   ist sie halb so hoch und die Flaechen bleiben, wie sie sind.

   Gefuellt wird spaltenweise, damit Plus und Minus untereinander bleiben: Ein
   Zoompaar, das diagonal auseinanderliegt, sucht man jedes Mal neu. Der
   Einklapper bekommt seine eigene Zeile darueber - er gehoert zu keiner der
   beiden Spalten, sondern zur ganzen Leiste.

   Gemessen wird die Arbeitsflaeche, nicht das Fenster: Auf einem iPad quer
   (1180 x 820) bricht die Werkzeugleiste oben zweizeilig um, die Flaeche ist
   nur gut 500 Pixel hoch, und die einspaltige Leiste (120 + 460 Pixel) lief
   unten aus dem Bild - samt dem Knopf, der eine eingeschaltete
   Schnittansicht anzeigt. */
@container workplane (max-height: 660px) {
  .camera-controls {
    display: grid;
    grid-template-columns: repeat(2, auto);
    transform: none;
  }

  /* Jede Gruppe nimmt ganze Zeilen, zwei Knoepfe breit: Plus und Minus, Maßband und Winkellineal, Notiz und ihr Auge
     bleiben so nebeneinander, und der Rahmen faellt mit der Gruppe zusammen. */
  .camera-controls > .camera-group {
    display: grid;
    grid-template-columns: repeat(2, auto);
    grid-column: 1 / -1;
    justify-content: start;
  }

  .camera-controls > .camera-controls-handle {
    grid-column: 1 / -1;
  }
}

/* At Large the column is a quarter taller, so it needs two columns from a taller
   workplane on - 600 px was measured for Medium (#241). */
@container workplane (max-height: 870px) {
  html[data-toolbar-size="large"] .camera-controls {
    display: grid;
    grid-template-columns: repeat(2, auto);
    transform: none;
  }

  html[data-toolbar-size="large"] .camera-controls > .camera-group {
    display: grid;
    grid-template-columns: repeat(2, auto);
    grid-column: 1 / -1;
    justify-content: start;
  }

  html[data-toolbar-size="large"] .camera-controls > .camera-controls-handle {
    grid-column: 1 / -1;
  }
}

/* ==========================================================================
   Object List (Outliner) Panel
   ========================================================================== */
.outliner-panel {
  position: absolute;
  /* Docked just right of the view cube, below the floating status message,
     which shares this corner. OBJECT_LIST_PANEL in ObjectListPanel.tsx knows
     this spot, to dock the panel when it is dropped near it. */
  top: 64px;
  left: 104px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  width: 300px;
  max-width: calc(100vw - 120px);
  max-height: calc(100% - 96px);
  background: rgba(254, 253, 252, 0.96);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  border: 1px solid #ede6da;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(86, 62, 36, 0.12);
  color: #563e24;
  overflow: hidden;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  animation: outlinerFadeIn 140ms ease-out;
}

.outliner-panel.moving,
.outliner-panel.moving .outliner-header {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

@keyframes outlinerFadeIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.outliner-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  /* The title bar moves the panel. */
  cursor: -webkit-grab;
  cursor: grab;
  touch-action: none;
  background: rgba(248, 246, 244, 0.98);
  border-bottom: 1px solid #ede6da;
}

.outliner-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
}

.outliner-header-icon {
  color: #8c735d;
}

.outliner-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 700;
  color: #715842;
  background: #ede6da;
  border-radius: 999px;
}

.outliner-close-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  color: #8c735d;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}

.outliner-close-button:hover {
  color: #3b2817;
  background: #e9e0d3;
}

/* Sorted A to Z: the button stays lit, so the list's order does not come as a surprise (#1046). */
.outliner-sort-button.active {
  color: #ad6206;
  background: #f6e7d2;
}

.outliner-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid #f0e9df;
  background: #faf8f5;
}

.outliner-search-icon {
  position: absolute;
  left: 20px;
  color: #a3917f;
  pointer-events: none;
}

.outliner-search-input {
  width: 100%;
  padding: 5px 26px 5px 28px;
  font-size: 12px;
  color: inherit;
  background: #ffffff;
  border: 1px solid #e2d9cd;
  border-radius: 6px;
  outline: none;
  transition: border-color 120ms ease;
}

.outliner-search-input:focus {
  border-color: #d46b08;
}

.outliner-search-clear {
  position: absolute;
  right: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: #a3917f;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

.outliner-search-clear:hover {
  color: #563e24;
}

.outliner-list-wrap {
  flex: 1 1;
  max-height: calc(100vh - 220px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.outliner-list-wrap::-webkit-scrollbar {
  width: 6px;
}

.outliner-list-wrap::-webkit-scrollbar-thumb {
  background: #ded5c7;
  border-radius: 3px;
}

.outliner-empty-state {
  padding: 28px 16px;
  text-align: center;
  font-size: 13px;
  color: #9a8877;
}

.outliner-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
}

.outliner-item {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid rgba(237, 230, 218, 0.5);
  transition: background 100ms ease;
  cursor: pointer;
}

.outliner-item:last-child {
  border-bottom: none;
}

.outliner-item:hover {
  background: rgba(240, 234, 224, 0.6);
}

.outliner-item.selected {
  background: #faefe0;
  border-color: rgba(220, 160, 90, 0.4);
}

.outliner-item.hidden-shape {
  opacity: 0.55;
}

.outliner-item.locked-shape .outliner-shape-name {
  color: #7b6857;
}

.outliner-row-main {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
}

.outliner-expand-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  color: #8c735d;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.outliner-expand-toggle:hover {
  background: #ede6da;
}

.outliner-expand-spacer {
  width: 18px;
  flex: none;
}

.outliner-swatch {
  width: 12px;
  height: 12px;
  flex: none;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.4);
}

.outliner-swatch.swatch-hole {
  background: repeating-linear-gradient(
    -45deg,
    #cfd7df,
    #cfd7df 2px,
    #9aa5b1 2px,
    #9aa5b1 4px
  );
  border: 1px dashed #7a889b;
}

.outliner-swatch.small {
  width: 9px;
  height: 9px;
}

.outliner-info {
  flex: 1 1;
  min-width: 0;
}

.outliner-label-group {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.outliner-shape-name {
  font-size: 12px;
  font-weight: 600;
  color: #3b2817;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The toolbar's group and bundle marks, small enough for a row; the thicker
   stroke keeps them from thinning to a hairline at this size. */
.outliner-shape-name .outliner-kind-icon {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 5px;
  vertical-align: -3px;
  stroke-width: 3.6;
  opacity: 0.75;
}

.outliner-shape-kind {
  font-size: 10px;
  color: #9a8877;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.outliner-rename-input {
  width: 100%;
  padding: 2px 4px;
  font-size: 12px;
  font-weight: 600;
  color: inherit;
  background: #ffffff;
  border: 1px solid #d46b08;
  border-radius: 4px;
  outline: none;
}

.outliner-badges {
  flex: none;
}

.outliner-badge {
  display: inline-block;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.outliner-badge.badge-solid {
  color: #2b6cb0;
  background: #ebf8ff;
  border: 1px solid #bee3f8;
}

.outliner-badge.badge-hole {
  color: #744210;
  background: #fefcbf;
  border: 1px solid #faf089;
}

.outliner-badge.small {
  padding: 0 4px;
  font-size: 9px;
}

.outliner-row-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: none;
}

.outliner-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  color: #a3917f;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: color 100ms ease, background 100ms ease;
}

.outliner-action-btn:hover {
  color: #3b2817;
  background: #ede6da;
}

.outliner-action-btn.active-locked {
  color: #c05621;
}

.outliner-action-btn.active-hidden {
  color: #b7791f;
}

.outliner-action-btn.rename-btn {
  opacity: 0;
}

.outliner-item:hover .outliner-action-btn.rename-btn {
  opacity: 1;
}

.outliner-children-list {
  list-style: none;
  margin: 0;
  padding: 2px 8px 6px 36px;
  background: rgba(245, 240, 232, 0.4);
  border-top: 1px dashed #ede6da;
}

.outliner-child-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  font-size: 11px;
}

.outliner-child-name {
  flex: 1 1;
  min-width: 0;
  color: #563e24;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Dark mode for outliner */
html[data-theme="dark"] .outliner-panel {
  background: rgba(30, 26, 22, 0.96);
  border-color: #443a30;
  color: #ddd2c4;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .outliner-header,
html[data-theme="dark"] .shape-inspector-header.movable {
  color: #ddd2c4;
  background: rgba(24, 21, 18, 0.98);
  border-color: #443a30;
}

html[data-theme="dark"] .shape-inspector-header.movable .inspector-header-icon,
html[data-theme="dark"] .shape-inspector-header.movable .inspector-rename-button {
  color: #a8947f;
}

html[data-theme="dark"] .shape-inspector-header.movable .inspector-header-icon:hover,
html[data-theme="dark"] .shape-inspector-header.movable .inspector-rename-button:hover {
  color: #ffffff;
  background: #443a30;
}

html[data-theme="dark"] .shape-inspector-header.movable .inspector-header-icon.active {
  color: #f0973a;
}

html[data-theme="dark"] .outliner-header-icon {
  color: #a8947f;
}

html[data-theme="dark"] .outliner-count-badge {
  color: #e5ded5;
  background: #443a30;
}

html[data-theme="dark"] .outliner-close-button {
  color: #a8947f;
}

html[data-theme="dark"] .outliner-close-button:hover {
  color: #ffffff;
  background: #443a30;
}

html[data-theme="dark"] .outliner-sort-button.active {
  color: #f0a64a;
  background: #4a3826;
}

html[data-theme="dark"] .outliner-search-wrap {
  background: #24201b;
  border-color: #383027;
}

html[data-theme="dark"] .outliner-search-input {
  background: #1e1a16;
  border-color: #443a30;
  color: #e5ded5;
}

html[data-theme="dark"] .outliner-search-input:focus {
  border-color: #f6ad55;
}

html[data-theme="dark"] .outliner-item {
  border-color: rgba(68, 58, 48, 0.5);
}

html[data-theme="dark"] .outliner-item:hover {
  background: rgba(48, 41, 34, 0.6);
}

html[data-theme="dark"] .outliner-item.selected {
  background: #3e3223;
  border-color: rgba(246, 173, 85, 0.35);
}

html[data-theme="dark"] .outliner-shape-name {
  color: #f7fafc;
}

html[data-theme="dark"] .outliner-shape-kind {
  color: #8c7d6e;
}

html[data-theme="dark"] .outliner-expand-toggle {
  color: #a8947f;
}

html[data-theme="dark"] .outliner-expand-toggle:hover {
  background: #443a30;
}

html[data-theme="dark"] .outliner-action-btn {
  color: #8c7d6e;
}

html[data-theme="dark"] .outliner-action-btn:hover {
  color: #f7fafc;
  background: #443a30;
}

html[data-theme="dark"] .outliner-action-btn.active-locked {
  color: #ed8936;
}

html[data-theme="dark"] .outliner-action-btn.active-hidden {
  color: #ecc94b;
}

html[data-theme="dark"] .outliner-badge.badge-solid {
  color: #63b3ed;
  background: rgba(49, 130, 206, 0.2);
  border-color: rgba(99, 179, 237, 0.3);
}

html[data-theme="dark"] .outliner-badge.badge-hole {
  color: #f6e05e;
  background: rgba(214, 158, 46, 0.2);
  border-color: rgba(246, 224, 94, 0.3);
}

html[data-theme="dark"] .outliner-children-list {
  background: rgba(20, 17, 14, 0.5);
  border-color: #383027;
}

html[data-theme="dark"] .outliner-child-name {
  color: #cbd5e0;
}

html[data-theme="dark"] .inspector-rename-button {
  color: #d8c8b2;
}

html[data-theme="dark"] .inspector-rename-button:hover {
  color: #f0973a;
  background: #463625;
}

html[data-theme="dark"] .inspector-name-input {
  background: #1e1a16;
  border-color: #ed8936;
  color: #f7fafc;
}

html[data-theme="dark"] .outliner-rename-input {
  background: #1e1a16;
  border-color: #ed8936;
  color: #f7fafc;
}

html[data-theme="dark"] .outliner-list-wrap::-webkit-scrollbar-thumb {
  background: #443a30;
}

/* ==========================================================================
   Export Warning for Hole-Only selections
   ========================================================================== */
.export-holes-only-warning {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-top: 10px;
  color: #8a3b00;
  background: #fff4e5;
  border: 1px solid #f0a45a;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
}

.export-holes-only-warning svg {
  flex: none;
  color: #d86a00;
}

/* The selection note carries its way out: a button that selects everything visible. */
.export-selection-note span {
  flex: 1 1;
}

.export-select-all-button {
  flex: none;
  padding: 5px 10px;
  color: #8a3b00;
  font: inherit;
  font-weight: 700;
  background: #ffffff;
  border: 1px solid #f0a45a;
  border-radius: 6px;
  cursor: pointer;
}

.export-select-all-button:hover,
.export-select-all-button:focus-visible {
  background: #ffe7c7;
}

html[data-theme="dark"] .export-select-all-button {
  color: #ffc480;
  background: rgba(180, 85, 0, 0.22);
  border-color: rgba(240, 164, 90, 0.5);
}

html[data-theme="dark"] .export-select-all-button:hover,
html[data-theme="dark"] .export-select-all-button:focus-visible {
  background: rgba(180, 85, 0, 0.36);
}

html[data-theme="dark"] .export-holes-only-warning {
  color: #ffc480;
  background: rgba(180, 85, 0, 0.16);
  border-color: rgba(240, 164, 90, 0.4);
}

html[data-theme="dark"] .export-holes-only-warning svg {
  color: #ffa447;
}

/* ==========================================================================
   Open group: the bar that closes it again
   ========================================================================== */
.open-group-banner {
  position: fixed;
  bottom: 88px;
  left: 50%;
  z-index: 41;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(720px, calc(100vw - 32px));
  padding: 8px 8px 8px 16px;
  color: #563e24;
  font-size: 13px;
  font-weight: 700;
  background: #fffaf2;
  border: 1px solid #e3b57a;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(80, 45, 10, 0.16);
  transform: translateX(-50%);
}

.open-group-banner span {
  flex: 1 1 auto;
}

.open-group-banner button {
  flex: none;
  padding: 6px 14px;
  font: inherit;
  border-radius: 999px;
  cursor: pointer;
}

.open-group-banner button:disabled {
  cursor: progress;
  opacity: 0.6;
}

.open-group-cancel {
  color: #563e24;
  background: transparent;
  border: 1px solid #e3b57a;
}

.open-group-done {
  color: #ffffff;
  background: #d46b08;
  border: 1px solid #d46b08;
}

.outliner-item.open-group-part {
  box-shadow: inset 3px 0 0 #d46b08;
}

html[data-theme="dark"] .open-group-banner {
  color: #f1e4d3;
  background: rgba(40, 32, 24, 0.96);
  border-color: rgba(227, 181, 122, 0.45);
}

html[data-theme="dark"] .open-group-cancel {
  color: #f1e4d3;
  border-color: rgba(227, 181, 122, 0.45);
}

/* Question marks that open the matching chapter of the user guide. They take
   the colour of whatever they sit in, so every theme keeps them readable. */
.panel-header-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

.guide-help-link {
  display: inline-grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: inherit;
  border-radius: 7px;
  opacity: 0.6;
  text-decoration: none;
}

.guide-help-link:hover,
.guide-help-link:focus-visible {
  background: rgba(127, 127, 127, 0.16);
  opacity: 1;
}

.workspace-modal-header .panel-header-actions button,
.top-action-panel header .panel-header-actions button {
  display: grid;
  place-items: center;
}

.shape-menu-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* The title bar moves the panel (#433); the pin keeps it open. */
.shape-menu-title {
  cursor: -webkit-grab;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.shape-menu-dropdown.moving .shape-menu-title {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.shape-menu-title-text {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  white-space: nowrap;
}

.shape-menu-pin {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 4px;
  color: #8c735d;
  background: transparent;
  cursor: pointer;
}

.shape-menu-pin:hover {
  background: #f3e7d8;
}

.shape-menu-pin.active {
  color: #bf6508;
  background: #fdf0dc;
}

html[data-theme="dark"] .shape-menu-pin {
  color: #bda78e;
}

html[data-theme="dark"] .shape-menu-pin:hover {
  background: #3a2c16;
}

html[data-theme="dark"] .shape-menu-pin.active {
  color: #f3a452;
  background: #3a2c16;
}

.shape-menu-title .guide-help-link,
.guide-modal h3 .guide-help-link,
.outliner-help-link {
  width: 24px;
  height: 24px;
}

.outliner-header-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* Collapsed: the title bar alone, without the line that separates it from the list. */
.outliner-panel.collapsed .outliner-header {
  border-bottom: none;
}

.guide-modal h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.guide-videos {
  margin: 0 0 14px;
  font-size: 13px;
}

.guide-videos ul {
  margin: 4px 0 0;
  padding-left: 18px;
}

.guide-videos a {
  color: #8f4700;
}

html[data-theme="dark"] .guide-videos a {
  color: #f3a452;
}

.inspector-help-link {
  width: 34px;
  height: 38px;
  color: #6f5840;
  opacity: 1;
}

.guide-modal .workspace-modal-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}

.guide-footer-link {
  padding: 6px 12px;
  color: #fff;
  background: #ad6206;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

html[data-theme="dark"] .inspector-help-link {
  color: #ece2d1;
}

.overhang-menu-icon.active {
  color: #e8322a;
}

html[data-theme="dark"] .shape-menu-subtitle {
  color: #cdbca6;
}

/* Bild der Ansicht im Export-Fenster: zwei Schalter. */
.export-image-section {
  gap: 8px;
}

.export-image-option {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.export-image-option input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #d3710c;
}

/* Zuletzt benutzte eigene Farben unter der Palette. */
.color-recent {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid rgba(68, 50, 31, 0.14);
}

.color-recent-label {
  color: #84715d;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* The row of kept colours: its label carries the pin that keeps or lets go of the colour chosen now (#507). */
.color-kept-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.color-keep-button {
  display: grid;
  width: 24px;
  height: 22px;
  place-items: center;
  padding: 0;
  color: #72583d;
  background: transparent;
  border: 1px solid rgba(68, 50, 31, 0.22);
  border-radius: 4px;
  cursor: pointer;
}

.color-keep-button[aria-pressed="true"] {
  color: #fff;
  background: #c06a12;
  border-color: #c06a12;
}

.color-keep-button:disabled {
  cursor: default;
  opacity: 0.45;
}

html[data-theme="dark"] .color-keep-button {
  color: #e1ceba;
  border-color: rgba(237, 228, 212, 0.28);
}

html[data-theme="dark"] .color-keep-button[aria-pressed="true"] {
  color: #1d1308;
  background: #e0903a;
  border-color: #e0902f;
}

/* Rechtsklick-Menue auf Koerpern. */
.shape-context-menu {
  position: fixed;
  z-index: 90;
  display: grid;
  min-width: 220px;
  max-width: calc(100vw - 16px);
  padding: 5px;
  color: #563e26;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid #dcccbc;
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(66, 48, 29, 0.22);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}

.shape-context-menu button {
  display: flex;
  min-height: 32px;
  padding: 6px 10px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  color: inherit;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.shape-context-menu button.separated {
  position: relative;
  margin-top: 9px;
}

.shape-context-menu button.separated::before {
  position: absolute;
  top: -5px;
  right: 6px;
  left: 6px;
  height: 1px;
  content: "";
  background: #e9ddd0;
}

.shape-context-menu button:hover,
.shape-context-menu button:focus-visible {
  color: #5a3712;
  background: #f5ebdf;
  outline: none;
}

.shape-context-menu button.danger {
  color: #b42318;
}

.shape-context-menu button.danger:hover,
.shape-context-menu button.danger:focus-visible {
  color: #8f1a12;
  background: #fde8e6;
}

.shape-context-menu kbd {
  color: #84715d;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

/* "Select other" can list many bodies (#804): the menu scrolls instead of running off the window. */
.shape-context-menu {
  max-height: calc(100vh - 16px);
  overflow-y: auto;
}

.shape-context-menu-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 8px;
  vertical-align: -1px;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 50%;
}

html[data-theme="dark"] .shape-context-menu {
  color: #ede4d4;
  background: rgba(40, 30, 20, 0.97);
  border-color: #5b4b3a;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.34);
}

html[data-theme="dark"] .shape-context-menu button:hover,
html[data-theme="dark"] .shape-context-menu button:focus-visible {
  color: #f9f7f2;
  background: #533e29;
}

html[data-theme="dark"] .shape-context-menu button.separated::before {
  background: #5b4b3a;
}

html[data-theme="dark"] .shape-context-menu button.danger {
  color: #ff8a80;
}

html[data-theme="dark"] .shape-context-menu button.danger:hover,
html[data-theme="dark"] .shape-context-menu button.danger:focus-visible {
  color: #ffd2cc;
  background: #5a2a22;
}

html[data-theme="dark"] .shape-context-menu kbd,
html[data-theme="dark"] .color-recent-label {
  color: #a79079;
}

html[data-theme="dark"] .color-recent {
  border-top-color: rgba(237, 228, 212, 0.14);
}

/* The safe-mode screen: shown instead of a blank page when the editor or the page stops with an
   error. It borrows the dialog card, so it follows the theme like every other window. */
.workspace-modal.safe-mode-screen {
  position: fixed;
  z-index: 1000;
  align-items: center;
  padding: 16px;
}

.safe-mode-screen .workspace-modal-backdrop {
  background: rgba(40, 30, 20, 0.35);
}

.workspace-modal-card.safe-mode-card {
  width: 540px;
  height: auto;
}

.safe-mode-card .workspace-modal-header strong {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
}

.safe-mode-card .workspace-modal-header svg {
  flex: none;
  color: var(--hover-accent-color);
}

.safe-mode-body {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
  padding: 16px;
  font-size: 14px;
  line-height: 1.5;
}

.safe-mode-body p {
  margin: 0;
}

.safe-mode-project {
  font-weight: 700;
}

.safe-mode-details {
  color: var(--muted-strong);
  font-size: 12px;
}

.safe-mode-details summary {
  cursor: pointer;
}

.safe-mode-details pre {
  max-height: 160px;
  margin: 6px 0 0;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.safe-mode-note {
  color: var(--hover-accent-color);
}

.safe-mode-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.safe-mode-actions button {
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 14px;
  color: inherit;
  font: inherit;
  font-weight: 600;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  cursor: pointer;
}

.safe-mode-actions button.primary {
  flex-basis: 100%;
  color: #fff;
  background: var(--primary);
  border-color: var(--primary);
}

.safe-mode-actions button:disabled {
  opacity: 0.6;
  cursor: progress;
}

.safe-mode-actions button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* The properties panel for several parts (#183). */
.selection-inspector .shape-inspector-header .inspector-name strong {
  font-size: 15px;
}

.selection-mixed-note {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  color: var(--muted-strong);
  font-size: 12px;
  line-height: 1.4;
}

.selection-gear-pair {
  margin: 10px 14px 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

/* The module in the line can be selected and copied (#645); the editor is otherwise not text to select. */
.layerling-editor .selection-gear-pair {
  -webkit-user-select: text;
  -moz-user-select: text;
       user-select: text;
}

.shape-inspector .inspector-action-button.selection-gear-fit {
  margin-top: 8px;
  margin-bottom: 0;
}

.selection-inspector-hint {
  margin: 10px 14px 12px;
  color: var(--muted-strong);
  font-size: 12px;
  line-height: 1.45;
}

/* A tool panel never runs off the bottom of the window (forum post 617808: the pattern panel in
   circle mode on a 1080p screen at 125 %): it scrolls inside, and its buttons stay in view. */
.edge-modifier-panel {
  max-height: calc(100dvh - var(--editor-toolbar-height) - 28px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* The window to draw a vase in: large, over the editor area, moved by its title bar and made larger or
   smaller from its corner. It opens below the status messages, which appear in the top left corner. The
   drawing board takes the whole height; its buttons and fields stand beside it - a vase is tall. */
.edge-modifier-panel.vase-drawing-window {
  top: calc(var(--editor-toolbar-height) + 62px);
  left: 84px;
  right: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(980px, calc(100vw - 84px - 360px));
  min-width: min(520px, calc(100vw - 16px));
  max-width: calc(100vw - 16px);
  height: calc(100dvh - var(--editor-toolbar-height) - var(--editor-footer-height) - 76px);
  min-height: 380px;
  max-height: calc(100dvh - var(--editor-toolbar-height) - 16px);
  overflow: hidden;
  resize: both;
  z-index: 47;
}

.vase-drawing-window:focus {
  outline: none;
}

.vase-drawing-window-body {
  display: flex;
  flex: 1 1;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

.vase-drawing-window-body > .cylinder-wrap-hint {
  margin: 0;
}

.vase-drawing-window .vase-drawing-tabs {
  max-width: 520px;
}

.vase-drawing-window .vase-drawing-tabs button {
  min-height: 36px;
  font-size: 13.5px;
}

.vase-drawing-window .vase-drawing-host {
  display: flex;
  flex: 1 1;
  flex-direction: column;
  min-height: 0;
}

.vase-drawing-window .vz {
  flex: 1 1;
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
}

.vase-drawing-window .vz-board {
  min-height: 0;
}

.vase-drawing-window .vz svg {
  height: 100%;
  min-height: 220px;
}

@media (min-width: 901px) {
  .vase-drawing-window .vz {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 270px);
    grid-template-rows: repeat(5, min-content) minmax(0, 1fr);
    column-gap: 14px;
  }

  .vase-drawing-window .vz > .vz-board {
    grid-row: 1 / -1;
    grid-column: 1;
  }

  .vase-drawing-window .vz > :not(.vz-board) {
    grid-column: 2;
  }
}

/* Narrow screens: the toolbar alone takes half of a phone, so the window covers the whole screen, the board
   at a fixed height, and it scrolls. */
@media (max-width: 900px) {
  .edge-modifier-panel.vase-drawing-window {
    top: 8px;
    left: 8px;
    z-index: 60;
    width: calc(100vw - 16px);
    min-width: 0;
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
    overflow-y: auto;
    resize: none;
  }

  .vase-drawing-window-body,
  .vase-drawing-window .vase-drawing-host {
    flex: none;
  }

  .vase-drawing-window .vz {
    grid-template-rows: none;
  }

  .vase-drawing-window .vz svg {
    height: min(62dvh, 520px);
  }
}

.edge-modifier-panel > .edge-modifier-footer {
  position: -webkit-sticky;
  position: sticky;
  bottom: -14px;
  z-index: 1;
  margin-bottom: -14px;
  padding-bottom: 14px;
  background: inherit;
}

/* The angles at a selected point's two neighbouring corners (#149): the same, a touch quieter. */
.sketch-neighbour-angle {
  opacity: 0.82;
}

/* Fonts of one's own (#customFonts): adding a file or an installed font, and the list of fonts. */
.font-manager-panel {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.font-manager-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.font-manager-actions {
  margin-bottom: 0;
}

.font-manager-actions > button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.font-manager-note {
  opacity: 0.8;
  line-height: 1.35;
}

.font-manager-busy,
.font-manager-error {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.font-manager-error {
  color: #b3261e;
}

.font-manager-system {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}

.font-manager-system input {
  width: 100%;
}

.font-manager-system ul {
  max-height: 220px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  border-radius: 8px;
}

.font-manager-system li button {
  width: 100%;
  padding: 6px 10px;
  text-align: left;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.font-manager-system li button:hover,
.font-manager-system li button:focus-visible {
  background: color-mix(in srgb, currentColor 10%, transparent);
}

.font-manager-list {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}

.font-manager-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  grid-gap: 8px;
  gap: 8px;
  margin-bottom: 0;
}

.font-manager-row > div {
  display: grid;
  min-width: 0;
}

.font-manager-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.font-manager-row small {
  opacity: 0.75;
}

.font-manager-drop {
  padding: 12px;
  text-align: center;
  line-height: 1.35;
  border: 1px dashed color-mix(in srgb, currentColor 35%, transparent);
  border-radius: 8px;
  opacity: 0.85;
}

.font-manager-drop.active {
  opacity: 1;
  background: color-mix(in srgb, currentColor 8%, transparent);
  border-style: solid;
}

/* The icon tag window: the SVG's picture, the icon's width and OK. */
.icon-tag-preview {
  display: grid;
  height: 132px;
  place-items: center;
  padding: 10px;
  color: #b9a58f;
  background: #fff;
  border: 1px solid #ebe1cf;
  border-radius: 8px;
}

.icon-tag-preview img {
  max-width: 100%;
  max-height: 110px;
  object-fit: contain;
}

.icon-tag-width {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  align-items: center;
  grid-gap: 4px 10px;
  gap: 4px 10px;
  color: #4d3720;
  font-size: 13px;
  font-weight: 600;
}

.icon-tag-width input {
  height: 32px;
  padding: 0 10px;
  color: #523c26;
  font: inherit;
  text-align: right;
  background: #fff;
  border: 1px solid #ebe4d7;
  border-radius: 6px;
}

.icon-tag-width input[aria-invalid="true"] {
  border-color: #c4361d;
}

.icon-tag-width small {
  grid-column: 1 / -1;
  color: #8e7a66;
  font-size: 11px;
  font-weight: 700;
}

.top-action-body .icon-tag-error {
  color: #b02f17;
}

.top-action-body .icon-tag-ok {
  color: #fff;
  background: #d07210;
  border-color: #b9620a;
}

.top-action-body .icon-tag-ok:hover:not(:disabled) {
  background: #b9620a;
}

.top-action-body .icon-tag-ok:disabled {
  opacity: 0.5;
  cursor: default;
}

html[data-theme="dark"] .icon-tag-preview,
html[data-theme="dark"] .icon-tag-width input {
  color: #ddccb9;
  background: #35281b;
  border-color: #5e4c3a;
}

html[data-theme="dark"] .icon-tag-width {
  color: #f0e7d9;
}

html[data-theme="dark"] .top-action-body .icon-tag-ok {
  color: #fff;
  background: #b9620a;
  border-color: #d07210;
}

.shape-inspector .icon-tag-card-error {
  color: #b02f17;
}

.icon-tag-preview-empty {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

/* The QR code window and card (#553): the text, the notes under it, the quiet zone switch. The
   preview stays black on white in every theme - it shows the code as a scanner sees it. */
.qr-code-text {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  color: var(--foreground);
  font-size: 13px;
  font-weight: 600;
}

.qr-code-text textarea {
  min-height: 64px;
  padding: 6px 10px;
  color: var(--foreground);
  font: inherit;
  font-weight: 600;
  resize: vertical;
  background: var(--tile-hover);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.qr-code-text textarea[aria-invalid="true"] {
  border-color: #c4361d;
}

.qr-code-text small,
.qr-code-note {
  color: var(--muted-strong);
  font-size: 11px;
  font-weight: 700;
}

.qr-code-text small.qr-code-warning,
.qr-code-panel small.qr-code-warning {
  color: #b02f17;
}

/* The window is taller than a small screen: its body scrolls, so OK stays within reach. */
.qr-code-panel .top-action-body {
  max-height: calc(100vh - var(--editor-toolbar-height) - var(--editor-footer-height) - 96px);
  overflow-y: auto;
}

.qr-code-panel .qr-code-preview {
  height: 172px;
  background: #fff;
}

.qr-code-panel .qr-code-preview img {
  max-height: 150px;
  image-rendering: pixelated;
}

.qr-code-check {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--foreground);
  font-size: 13px;
  font-weight: 600;
}

.qr-code-check input {
  accent-color: var(--primary);
}

html[data-theme="dark"] .qr-code-text small.qr-code-warning,
html[data-theme="dark"] .qr-code-panel small.qr-code-warning {
  color: #ff8a70;
}

/* An update arrived while this page was open: offer to reload (lib/newVersionWatch.ts). */
.new-version-notice {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 3000;
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  width: min(380px, calc(100vw - 32px));
  padding: 14px 16px;
  color: #3f2f20;
  background: #fffaf2;
  border: 1px solid #d8b98f;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(60, 40, 10, 0.22);
}

.new-version-notice p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
}

.new-version-notice ul {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 700;
}

.new-version-notice-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.new-version-notice-actions button {
  display: inline-flex;
  min-height: 34px;
  padding: 0 13px;
  align-items: center;
  gap: 7px;
  border: 1px solid #d8c8b7;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.new-version-notice-actions .secondary {
  color: #745e48;
  background: white;
}

.new-version-notice-actions .primary {
  color: white;
  background: #cf6a12;
  border-color: #b45a0c;
}

/* Interactive Help (#424): while it is on the pointer is a question mark and whatever has a name
   under it is outlined; a click asks the guide about it. The window is a tool panel of its own,
   at the left edge so it stands beside the tool panels at the right, and above every dialog. */
body.help-mode,
body.help-mode * {
  cursor: help !important;
}

/* Over a place the help has nothing about, the pointer says so before a click is wasted. */
body.help-mode.help-void,
body.help-mode.help-void * {
  cursor: not-allowed !important;
}

body.help-mode [data-help-window],
body.help-mode [data-help-window] *,
body.help-mode [data-help-exempt],
body.help-mode [data-help-exempt] * {
  cursor: auto !important;
}

body.help-mode [data-help-window] a,
body.help-mode [data-help-window] button,
body.help-mode [data-help-exempt],
body.help-mode [data-help-exempt] * {
  cursor: pointer !important;
}

/* A control that is switched off with the disabled attribute gets no mouse event at all in the browser,
   not even to the page: a click on it was lost and the help stayed silent (#424, "Center view on
   selection"). Letting the pointer pass through puts the click on what lies behind, and the help finds
   the control by its position (disabledControlAt in InteractiveHelp.tsx). */
body.help-mode :is(button, input, select, textarea):disabled {
  pointer-events: none;
}

[data-help-hover] {
  outline: 2px solid #1a73c9 !important;
  outline-offset: 2px;
  border-radius: 3px;
}

html[data-theme="dark"] [data-help-hover] {
  outline-color: #6db3ff !important;
}

.action-buttons .action-icon-button.active {
  background: rgba(204, 112, 17, 0.16);
  box-shadow: inset 0 0 0 1px #cc7011;
}

.interactive-help-window {
  top: calc(var(--editor-toolbar-height) + 14px);
  right: auto;
  left: 84px;
  z-index: 260;
  width: min(360px, calc(100vw - 28px));
}

.interactive-help-note,
.interactive-help-answer p {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
}

.interactive-help-answer,
.interactive-help-more {
  margin-top: 10px;
}

.interactive-help-answer small,
.interactive-help-more small {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  opacity: 0.72;
}

.interactive-help-more ul {
  margin: 4px 0 0;
  padding-left: 17px;
  font-size: 12px;
  line-height: 1.5;
}

.interactive-help-window a:not(.primary):not(.secondary):not(.guide-help-link) {
  color: #8a4b0a;
}

html[data-theme="dark"] .interactive-help-window a:not(.primary):not(.secondary):not(.guide-help-link) {
  color: #f0b565;
}

.edge-modifier-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid #d8c8b7;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

/* Simple mode (#695): leaving it is a press held for two seconds; the bar fills while it is held. */
.simple-mode-hold {
  position: relative;
  overflow: hidden;
  flex: none;
  padding: 8px 14px;
  border: 1px solid var(--workspace-border, rgba(127, 127, 127, 0.5));
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.simple-mode-hold::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 4px;
  transform: scaleX(0);
  transform-origin: left;
  background: currentColor;
}

.simple-mode-hold.holding::after {
  transform: scaleX(1);
  transition: transform 2s linear;
}

/* Links inside running text: the page resets every link to its surroundings,
   so a link in a sentence looked like plain text. These get the accent colour, an underline and a
   small arrow for "opens in a new tab", in the welcome panel, the what's-new note, the video lists
   and the help window. */
.dashboard-welcome-switch a,
.dashboard-welcome-videos a,
.whats-new-note a,
.guide-videos a,
.interactive-help-more a {
  color: #8f4700;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

.dashboard-welcome-switch a:hover,
.dashboard-welcome-videos a:hover,
.whats-new-note a:hover,
.guide-videos a:hover,
.interactive-help-more a:hover {
  color: #ad6206;
  text-decoration-thickness: 2.5px;
}

.dashboard-welcome-switch a[target="_blank"]::after,
.dashboard-welcome-videos a[target="_blank"]::after,
.whats-new-note a[target="_blank"]::after,
.guide-videos a[target="_blank"]::after,
.interactive-help-more a[target="_blank"]::after {
  content: "\00a0\2197\FE0E";
  display: inline-block;
  font-size: 0.85em;
  text-decoration: none;
}

html[data-theme="dark"] .dashboard-welcome-switch a,
html[data-theme="dark"] .dashboard-welcome-videos a,
html[data-theme="dark"] .whats-new-note a,
html[data-theme="dark"] .guide-videos a,
html[data-theme="dark"] .interactive-help-more a {
  color: #f3a452;
}

html[data-theme="dark"] .dashboard-welcome-switch a:hover,
html[data-theme="dark"] .dashboard-welcome-videos a:hover,
html[data-theme="dark"] .whats-new-note a:hover,
html[data-theme="dark"] .guide-videos a:hover,
html[data-theme="dark"] .interactive-help-more a:hover {
  color: #ffc784;
}

/*!***************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/dashboard.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************/
/*
 * The start page: the welcome guide at the top, and the tabs that hold the designs - one for this
 * browser, one for the server when there is one - with the controls of the open tab beside them.
 */

/* The welcome guide comes first, under the header. Its cross sits on the frame, outside the fold,
   so it stays in reach while the guide is folded to one line. */
.dashboard-welcome-frame {
  position: relative;
  margin-bottom: 22px;
}

.dashboard-welcome-hide {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  padding: 0;
  color: #96816a;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.dashboard-welcome-hide:hover,
.dashboard-welcome-hide:focus-visible {
  color: #ad6206;
  background: #fbf1e3;
}

/* The steps are numbered because they are a sequence - each one needs the one
   before it - and the numbers sit in their own column so the text lines up
   whatever the wording. */
.dashboard-welcome {
  padding: 0;
  background: #ffffff;
  border: 1px solid #ede4d4;
  border-radius: 10px;
}

/* The fold handle. It carries the heading, so a reader who never opens it still
   learns what is inside; the arrow is drawn here rather than left to the
   browser's own marker, which differs from engine to engine. */
.dashboard-welcome-summary {
  display: grid;
  grid-template-columns: 18px 1fr;
  grid-gap: 2px 12px;
  gap: 2px 12px;
  /* Room on the right for the cross that puts the guide away. */
  padding: 16px 56px 16px 22px;
  cursor: pointer;
  list-style: none;
}

.dashboard-welcome-summary::-webkit-details-marker {
  display: none;
}

.dashboard-welcome-summary::before {
  grid-row: span 2;
  align-self: center;
  width: 8px;
  height: 8px;
  margin-left: 4px;
  border-right: 2px solid #ad6206;
  border-bottom: 2px solid #ad6206;
  transform: rotate(-45deg);
  transition: transform 120ms ease;
  content: "";
}

.dashboard-welcome[open] .dashboard-welcome-summary::before {
  transform: rotate(45deg);
}

.dashboard-welcome-summary:hover .dashboard-welcome-summary-title {
  color: #ad6206;
}

.dashboard-welcome-summary-title {
  color: #573f26;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.dashboard-welcome-summary-hint {
  color: #96816a;
  font-size: 13px;
  font-weight: 600;
}

.dashboard-welcome-body {
  display: grid;
  grid-gap: 16px;
  gap: 16px;
  padding: 4px 22px 24px 52px;
}

/* As wide as the lists in the panel, so the closing lines do not stop short of them. */
.dashboard-welcome p {
  margin: 0;
  color: #7a6650;
  font-size: 14px;
  line-height: 1.6;
}

.dashboard-welcome ol {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: welcome-step;
}

.dashboard-welcome li {
  display: grid;
  grid-template-columns: 26px 1fr;
  grid-gap: 4px 12px;
  gap: 4px 12px;
  color: #7a6650;
  font-size: 14px;
  line-height: 1.55;
}

.dashboard-welcome li::before {
  counter-increment: welcome-step;
  content: counter(welcome-step);
  grid-row: span 2;
  width: 26px;
  height: 26px;
  color: #9a5a06;
  font-size: 13px;
  font-weight: 600;
  line-height: 26px;
  text-align: center;
  background: #fdf3e2;
  border: 1px solid #edcfa2;
  border-radius: 50%;
}

.dashboard-welcome li strong {
  color: #573f26;
  font-size: 15px;
}

/* The one emphasised thing in the panel, because it is the sentence this
   project exists for: people arriving from other tools. */
.dashboard-welcome-switch {
  padding: 13px 16px;
  color: #6c5640;
  background: #fdf4e3;
  border-left: 3px solid #e8a865;
  border-radius: 0 7px 7px 0;
}

.dashboard-welcome-switch strong {
  color: #9a5a06;
}

/* Everything beyond the first steps: a plain list, so it does not compete
   with the numbered steps above it. The step rules match any li in the panel,
   hence the resets. */
.dashboard-welcome-more {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}

.dashboard-welcome-more h3 {
  margin: 0;
  color: #573f26;
  font-size: 15px;
  font-weight: 700;
}

.dashboard-welcome-more ul {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
}

.dashboard-welcome-more li {
  display: list-item;
}

.dashboard-welcome-more li::before {
  content: none;
}

.dashboard-welcome-more li strong {
  font-size: inherit;
}

.dashboard-welcome-videos a {
  color: #8f4700;
  font-weight: 700;
}

.dashboard-welcome-video-meta {
  color: #8a745c;
  font-size: 13px;
}

/* ... which leaves the pointer to the in-editor help as a quiet closing line,
   not a second box competing with it. */
.dashboard-welcome-help {
  color: #8a745c;
  font-size: 13px;
}

/* The guide is the way to learn more, so its link stands apart as a button rather than hiding in the sentence. */
.dashboard-welcome-guide-link {
  display: flex;
  align-self: flex-start;
  width: -moz-fit-content;
  width: fit-content;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 9px 16px;
  border: 1.5px solid #ad5900;
  border-radius: 8px;
  background: #fff6ea;
  color: #8f4700;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.dashboard-welcome-guide-link:hover,
.dashboard-welcome-guide-link:focus-visible {
  background: #ad5900;
  color: #fff;
}

html[data-theme="dark"] .dashboard-welcome {
  background: var(--panel);
  border-color: #514130;
}

html[data-theme="dark"] .dashboard-welcome h2,
html[data-theme="dark"] .dashboard-welcome h3,
html[data-theme="dark"] .dashboard-welcome li strong {
  color: #f3ede3;
}

/* The folded-shut state was left behind when the rest of this panel was given
   dark colours: its heading kept the near-brown of the light theme and came
   out dimmer than the line underneath it. */
html[data-theme="dark"] .dashboard-welcome-summary-title {
  color: #f3ede3;
}

html[data-theme="dark"] .dashboard-welcome-summary-hint {
  color: #a79078;
}

html[data-theme="dark"] .dashboard-welcome-summary:hover .dashboard-welcome-summary-title {
  color: #f3a452;
}

html[data-theme="dark"] .dashboard-welcome p,
html[data-theme="dark"] .dashboard-welcome li {
  color: #bda78e;
}

html[data-theme="dark"] .dashboard-welcome li::before {
  color: #f3a452;
  background: #3a2c16;
  border-color: #6b5326;
}

html[data-theme="dark"] .dashboard-welcome-switch {
  color: #cdb99f;
  background: #332619;
  border-left-color: #b9762c;
}

html[data-theme="dark"] .dashboard-welcome-switch strong {
  color: #f3a452;
}

html[data-theme="dark"] .dashboard-welcome-videos a {
  color: #f3a452;
}

html[data-theme="dark"] .dashboard-welcome-video-meta,
html[data-theme="dark"] .dashboard-welcome-help {
  color: #a08a71;
}

html[data-theme="dark"] .dashboard-welcome-guide-link {
  border-color: #f3a452;
  background: rgba(243, 164, 82, 0.12);
  color: #f3a452;
}

html[data-theme="dark"] .dashboard-welcome-guide-link:hover,
html[data-theme="dark"] .dashboard-welcome-guide-link:focus-visible {
  background: #f3a452;
  color: #241a10;
}


/* The tabs sit on one line with the controls of the open tab; the line under them runs the whole
   width, and the open tab is underlined on it. */
.design-tabs-header {
  align-items: flex-end;
  gap: 10px 16px;
  margin-bottom: 12px;
  border-bottom: 1px solid #eae2d4;
}

.design-tabs {
  display: flex;
  flex: none;
  gap: 4px;
}

.design-tab {
  margin-bottom: -1px;
  padding: 8px 12px 10px;
  color: #97836e;
  font: inherit;
  font-size: 19px;
  font-weight: 600;
  white-space: nowrap;
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 6px 6px 0 0;
  cursor: pointer;
}

.design-tab:hover {
  color: #6f5840;
}

.design-tab.active {
  color: #553c21;
  border-bottom-color: #dd7906;
}

/* "Designs" over the tabs, drawn like the start page's other headings. */
.design-tabs-heading {
  margin: 6px 0 4px;
  color: #553c21;
  font-size: 28px;
  line-height: 1.1;
}

/* "Continue workplane" shows the picture of the design it opens, at the right end of the tile. */
.dashboard-action-thumb {
  flex: none;
  width: 64px;
  height: 48px;
  margin-left: auto;
  object-fit: contain;
  background: #f1ebe1;
  border-radius: 6px;
}

/* No room for it on the small tiles of a phone. */
@media (max-width: 560px) {
  .dashboard-main.has-projects .dashboard-action-thumb {
    display: none;
  }
}

/* A design of this browser dragged over the server's tab. */
.design-tab.drop-target {
  color: #9f5508;
  background: #fdf3e2;
  box-shadow: inset 0 0 0 2px #e8c79a;
}

.design-tabs-header .dashboard-controls {
  padding-bottom: 8px;
  font-size: 14px;
}

.dashboard-backup-button:disabled {
  cursor: default;
  opacity: 0.6;
}

.dashboard-backup-button .spinning {
  animation: design-tab-spin 850ms linear infinite;
}

@keyframes design-tab-spin {
  to { transform: rotate(360deg); }
}

/* The way back out of a folder, under the tabs; nothing at the top level. */
.design-tab-trail {
  margin-bottom: 12px;
}

.design-tab-trail:empty {
  display: none;
}

/* The designs of this browser live nowhere else: a card in the old storage notice's orange, so a
   beginner does not miss that a crash or an update can lose them. */
.browser-backup-note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding: 14px 16px;
  color: #4a2f10;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  background: #fff1dc;
  border: 2px solid #e08a2c;
  border-radius: 10px;
}

.browser-backup-note > span {
  flex: 1 1;
  min-width: 0;
}

.browser-backup-note > svg {
  flex: none;
  color: #d9730d;
}

.browser-backup-help {
  display: inline-grid;
  width: 20px;
  height: 20px;
  color: inherit;
}

@media (max-width: 860px) {
  /* Stacked, the controls go above and the tabs stay on the line. */
  .design-tabs-header {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .design-tab {
    font-size: 17px;
  }
}

html[data-theme="dark"] .dashboard-welcome-hide {
  color: #b9a58e;
}

html[data-theme="dark"] .dashboard-welcome-hide:hover,
html[data-theme="dark"] .dashboard-welcome-hide:focus-visible {
  color: #f3a452;
  background: #3a2c16;
}

html[data-theme="dark"] .design-tabs-header {
  border-bottom-color: #514130;
}

html[data-theme="dark"] .design-tab {
  color: #b9a58e;
}

html[data-theme="dark"] .design-tab:hover,
html[data-theme="dark"] .design-tab.active,
html[data-theme="dark"] .design-tabs-heading {
  color: #f3ede3;
}

html[data-theme="dark"] .design-tab.active {
  border-bottom-color: #f3a452;
}

html[data-theme="dark"] .dashboard-action-thumb {
  background: #2a2117;
}

html[data-theme="dark"] .design-tab.drop-target {
  color: #fbeed9;
  background: #3a2c16;
  box-shadow: inset 0 0 0 2px #d9863a;
}

html[data-theme="dark"] .browser-backup-note {
  color: #f6e3c9;
  background: #3a2812;
  border-color: #d9863a;
}

html[data-theme="dark"] .browser-backup-note > svg {
  color: #f3a452;
}

/*!*****************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/historyView.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************/
/* The History view's styles, kept apart from globals.css. layout.tsx imports
   this file right after globals.css; nothing that came after these rules there
   touches the History view, so the order changes nothing.
   scripts/generate-graphite-theme.mjs reads both files, in that order. */

/* ---------------------------------------------------------------------------
   The history view: a bar at the foot of the work area while the viewport
   shows an earlier state. The ribbon stays visible but asleep, except for the
   history button that closes the view again; nothing in the bar changes the
   design, it only looks back and lets you take a state along.
   ------------------------------------------------------------------------- */
.history-view-bar {
  position: fixed;
  bottom: calc(var(--editor-footer-height) + 16px);
  /* Centred by arithmetic, not by auto margins: the movable-panel hook reads
     the docked spot from left/top, and a margin that goes away when the bar
     floats would shift it. */
  left: calc((100vw - min(760px, 100vw - 28px)) / 2);
  z-index: 46;
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  width: min(760px, calc(100vw - 28px));
  padding: 12px 16px 14px;
  color: #584027;
  background: rgba(254, 252, 250, 0.98);
  border: 1px solid #dacbbb;
  border-radius: 12px;
  box-shadow: 0 14px 38px rgba(74, 53, 30, 0.2);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}

.history-view-head.movable {
  cursor: -webkit-grab;
  cursor: grab;
  touch-action: none;
}

.history-view-bar.moving,
.history-view-bar.moving .history-view-head.movable {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.history-view-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.history-view-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

.history-view-heading strong {
  font-size: 15px;
  font-weight: 600;
}

.history-view-heading span {
  font-size: 12px;
  color: #8a7560;
}

.history-view-head .panel-header-actions button {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
}

.history-view-head .panel-header-actions button:hover,
.history-view-head .guide-help-link:hover {
  background: #f3ece2;
}

.history-view-slider {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  grid-gap: 8px;
  gap: 8px;
}

.history-view-slider > button {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  color: #745e48;
  background: #fff;
  border: 1px solid #d8c8b7;
  border-radius: 999px;
  cursor: pointer;
}

.history-view-slider > button:disabled {
  cursor: default;
  opacity: 0.4;
}

.history-view-slider .range-control {
  height: 32px;
}

.history-view-slider input[type="range"]:focus-visible {
  outline: 2px solid #d07313;
  outline-offset: 4px;
  border-radius: 999px;
}

.history-view-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-gap: 4px 14px;
  gap: 4px 14px;
  font-size: 13px;
}

.history-view-step {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.history-view-step.next {
  justify-content: flex-end;
}

.history-view-step > svg {
  flex: none;
  color: #a08a73;
}

.history-view-step-label {
  flex: none;
  color: #8a7560;
}

.history-view-step-text {
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-view-step.none .history-view-step-text {
  font-weight: 400;
  color: #a08a73;
}

@media (max-width: 560px) {
  .history-view-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .history-view-step.next {
    justify-content: flex-start;
  }
}

/* The steps as a list, newest at the top (#1023): a click goes to that state. */
.history-view-head .panel-header-actions button.active {
  color: #b35f07;
  background: #fbead6;
}

.history-view-list {
  display: grid;
  max-height: min(240px, 32vh);
  margin: 0;
  padding: 4px;
  overflow-y: auto;
  list-style: none;
  background: #fff;
  border: 1px solid #e6d9ca;
  border-radius: 8px;
}

.history-view-list button {
  display: flex;
  width: 100%;
  min-height: 28px;
  padding: 3px 8px;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-size: 13px;
  text-align: start;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.history-view-list button:hover {
  background: #f6efe6;
}

.history-view-list button.shown {
  color: #fff;
  background: #cc7011;
}

.history-view-list button.ahead:not(.shown) {
  color: #a08a73;
  font-style: italic;
}

.history-view-list-number {
  flex: none;
  min-width: 2.2em;
  font-size: 11px;
  text-align: end;
  opacity: 0.7;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.history-view-list-text {
  flex: 1 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-view-list-now {
  flex: none;
  padding: 0 7px;
  font-size: 11px;
  font-weight: 700;
  font-style: normal;
  color: #2a8f57;
  border: 1px solid currentColor;
  border-radius: 999px;
}

.history-view-list button.shown .history-view-list-now {
  color: #fff;
}

.history-view-state {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 14px;
  font-size: 13px;
}

.history-view-state strong {
  font-weight: 600;
}

.history-view-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  color: #8a7560;
}

.history-view-facts .current {
  color: #2a8f57;
  font-weight: 700;
}

.history-view-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.history-view-actions button {
  display: inline-flex;
  min-height: 34px;
  padding: 0 13px;
  align-items: center;
  gap: 7px;
  border: 1px solid #d8c8b7;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.history-view-actions .secondary {
  color: #745e48;
  background: white;
}

.history-view-actions .primary {
  color: white;
  background: #cc7011;
  border-color: #b35f07;
}

.history-view-actions button:disabled {
  cursor: default;
  opacity: 0.55;
}

/* Delete history: alone at the left of the row, in a colour that says it is not like the others. */
.history-view-actions .delete-history {
  margin-right: auto;
  color: #a33a2a;
  background: white;
  border-color: #e3bdb4;
}

.history-view-actions .delete-history:hover:not(:disabled) {
  background: #fdf1ee;
}

.history-view-confirm {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  margin-bottom: 10px;
  padding: 10px 12px;
  color: #6b2a1f;
  background: #fdf1ee;
  border: 1px solid #e3bdb4;
  border-radius: 8px;
}

.history-view-confirm p {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
}

.history-view-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.history-view-confirm-actions button {
  display: inline-flex;
  min-height: 34px;
  padding: 0 13px;
  align-items: center;
  gap: 7px;
  border: 1px solid #d8c8b7;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.history-view-confirm-actions .secondary {
  color: #745e48;
  background: white;
}

.history-view-confirm-actions .danger {
  color: white;
  background: #b4402e;
  border-color: #962f1f;
}

.history-view-spinner {
  animation: history-view-spin 0.9s linear infinite;
}

@keyframes history-view-spin {
  to { transform: rotate(360deg); }
}

/* Asleep while looking back: every tool but the one that ends the view. The
   buttons are disabled and their sections inert in the markup; this only
   shows it. */
.layerling-editor.history-view-active .tool-group .toolbar-section:not([data-group="history"]),
.layerling-editor.history-view-active .toolbar-section[data-group="history"] .toolbar-icon:not(.active),
.layerling-editor.history-view-active .outliner-panel,
.layerling-editor.history-view-active .toolbar-title-row-actions {
  pointer-events: none;
  opacity: 0.45;
}

.layerling-editor.history-view-active :is(.action-icon-button, .toolbar-workspace-tabs button):disabled {
  cursor: default;
  opacity: 0.45;
}

@media (max-width: 640px) {
  .history-view-bar {
    left: 8px;
    width: calc(100vw - 16px);
    padding: 10px 12px 12px;
  }

  .history-view-state {
    flex-direction: column;
  }

  .history-view-actions button {
    flex: 1 1 auto;
    justify-content: center;
  }
}

html[data-theme="dark"] .history-view-bar {
  color: #ede4d4;
  background: rgba(40, 30, 20, 0.97);
  border-color: #5b4b3a;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.34);
}

html[data-theme="dark"] .history-view-heading span,
html[data-theme="dark"] .history-view-step-label,
html[data-theme="dark"] .history-view-step > svg,
html[data-theme="dark"] .history-view-step.none .history-view-step-text,
html[data-theme="dark"] .history-view-facts {
  color: #b9a68f;
}

html[data-theme="dark"] .history-view-facts .current {
  color: #5fd394;
}

html[data-theme="dark"] .history-view-head .panel-header-actions button:hover,
html[data-theme="dark"] .history-view-head .guide-help-link:hover {
  background: #3f3022;
}

html[data-theme="dark"] .history-view-head .panel-header-actions button.active {
  color: #f0a95a;
  background: #4a3622;
}

html[data-theme="dark"] .history-view-list {
  background: #2f2318;
  border-color: #5b4b3a;
}

html[data-theme="dark"] .history-view-list button:hover {
  background: #3f3022;
}

html[data-theme="dark"] .history-view-list button.shown {
  color: #fff;
  background: #c4670d;
}

html[data-theme="dark"] .history-view-list button.ahead:not(.shown) {
  color: #b9a68f;
}

html[data-theme="dark"] .history-view-list-now {
  color: #5fd394;
}

html[data-theme="dark"] .history-view-slider > button,
html[data-theme="dark"] .history-view-actions .secondary,
html[data-theme="dark"] .history-view-inside button {
  color: #f0e7d9;
  background: #413121;
  border-color: #65503b;
}

html[data-theme="dark"] .history-view-slider .range-control input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(to right, #e0862a 0 var(--slider-pos), #5b4b3a var(--slider-pos) 100%);
}

html[data-theme="dark"] .history-view-slider .range-control input[type="range"]::-moz-range-track {
  background: #5b4b3a;
}

html[data-theme="dark"] .history-view-slider .range-control input[type="range"]::-moz-range-progress {
  background: #e0862a;
}

/* The groups opened to look inside, with the way back out. */
.history-view-inside {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 700;
  color: #0b6f96;
  background: #e6f6fc;
  border: 1px solid #a9dcef;
  border-radius: 8px;
}

.history-view-inside > span {
  flex: 1 1;
  min-width: 0;
}

.history-view-inside button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 10px;
  font: inherit;
  font-weight: 700;
  color: #745e48;
  background: #fff;
  border: 1px solid #d8c8b7;
  border-radius: 999px;
  cursor: pointer;
}

html[data-theme="dark"] .history-view-inside {
  color: #8fdaf5;
  background: rgba(0, 174, 234, 0.12);
  border-color: rgba(0, 174, 234, 0.4);
}

/*!***********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/notes.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************/
/* The notes and reference points over the 3D view and over a sketch (ViewportOverlays' NoteOverlay). */

/* --- Notizen ---------------------------------------------------------------
   Eine Notiz ist HTML ueber der Leinwand, keine Textur darin: So bleibt die
   Schrift bei jeder Zoomstufe scharf, laesst sich markieren und kopieren. Die
   Ebene selbst faengt keine Zeiger ab - nur die Nadeln und die Karten tun das,
   sonst liesse sich durch sie hindurch nichts mehr anfassen. */
.note-overlay {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}

/* Verschoben wird um die halbe Nadel, nicht um die halbe Zeile: Die Nadel soll
   auf dem Punkt sitzen, an dem die Notiz haengt - die Karte daneben zaehlt
   nicht mit. Kippt die Zeile nach links, steht die Nadel an ihrem Ende. */
.note-pin-anchor {
  position: absolute;
  transform: translate(-13px, -13px);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  pointer-events: none;
}

.note-pin-anchor.flipped {
  transform: translate(calc(-100% + 13px), -13px);
  flex-direction: row-reverse;
}

.note-pin-anchor.flipped .note-pin {
  border-radius: 999px 999px 4px 999px;
}

.note-pin {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 999px 999px 999px 4px;
  border: 2px solid var(--panel);
  background: var(--primary);
  color: #fff;
  font: 700 13px/1 var(--font-ui);
  display: grid;
  place-items: center;
  cursor: -webkit-grab;
  cursor: grab;
  box-shadow: var(--shadow);
  pointer-events: auto;
  touch-action: none;
}

.note-pin:active {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

/* Eine angeheftete Notiz traegt einen Ring: Man soll ihr ansehen, dass sie mit
   ihrem Koerper wandert, ohne sie anzufassen. */
.note-pin.attached {
  box-shadow: var(--shadow), 0 0 0 3px color-mix(in srgb, var(--primary) 35%, transparent);
}

/* A reference point is a small round mark, not a numbered pin. */
.note-pin.point-pin {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #ff9a2e;
  color: #1b1b1b;
  border-width: 2px;
}

.note-pin-anchor.flipped .note-pin.point-pin {
  border-radius: 999px;
}

.note-card.point-card {
  width: 190px;
}

/* The title bar of the card: drag it away from the pin, double-click to bring it back. */
.point-card-handle {
  cursor: -webkit-grab;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  padding: 2px 0 4px;
  font: 700 13px/1.2 var(--font-ui);
}

.point-card-handle:active {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.point-field {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  align-items: center;
  grid-gap: 6px;
  gap: 6px;
  font: 600 12px/1.2 var(--font-ui);
  color: var(--foreground);
}

.point-field input {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--tile);
  color: var(--foreground);
  font: 500 13px/1.2 var(--font-ui);
  padding: 5px 7px;
  text-align: right;
}

.point-field input:focus-visible {
  outline: 2px solid var(--primary);
}

.point-field small {
  color: var(--muted);
}

.note-card {
  width: 210px;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: var(--panel);
  box-shadow: var(--shadow);
  pointer-events: auto;
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}

/* Eine Zeile ist das Mindestmass - was darueber hinausgeht, waechst mit dem
   Text mit. Der Anfasser bleibt, wer mehr Platz zum Schreiben will, zieht sich
   das Feld groesser. */
.note-text {
  width: 100%;
  min-height: 32px;
  resize: vertical;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--tile);
  color: var(--foreground);
  font: 400 13px/1.35 var(--font-ui);
  padding: 6px 7px;
}

.note-text:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

.note-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.point-card .point-delete-all {
  width: 100%;
  justify-content: center;
  white-space: nowrap;
}

.note-card-end {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.note-help-link,
.sketch-corner-help {
  width: 24px;
  height: 24px;
}

.note-action {
  border: 0;
  background: none;
  padding: 2px 4px;
  border-radius: 6px;
  color: var(--muted-strong);
  font: 600 11px/1 var(--font-ui);
  cursor: pointer;
}

.note-action:hover {
  background: var(--tile-hover);
  color: var(--foreground);
}

.note-action.danger:hover {
  color: var(--filament-coral);
}

.note-hint {
  color: var(--muted-strong);
  font: 500 11px/1 var(--font-ui);
}

/* Solange das Werkzeug an ist, sagt der Zeiger, dass der naechste Klick eine
   Notiz setzt. */
.workplane-wrap.note-mode .three-workplane-host,
.sketch-plate.note-mode {
  cursor: copy;
}

/* In the sketch a note lands on a line or a picture as well, so they keep the same pointer; the doubled class
   outranks the select tool's plain arrow and the cursors of lines, points, pictures and handles. */
.sketch-plate.note-mode.note-mode,
.sketch-plate.note-mode.note-mode * {
  cursor: copy;
}

@media (max-width: 720px) {
  .note-card {
    width: 168px;
  }
}

/*!**********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/tape.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************/
/* --- Tape measure overlay: lines, points and labels drawn over the 3D view. */
.tape-overlay {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
}

.tape-guides {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

.tape-segment {
  stroke: #5a3917;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
  transition: stroke 120ms ease, stroke-width 120ms ease;
}

/* A halo under the line, so it reads on the workplane and on bodies of any colour. */
.tape-segment-casing {
  stroke: rgba(255, 255, 255, 0.75);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.tape-segment-group.hovered .tape-segment {
  stroke-width: 3;
}

.tape-segment-hit {
  stroke: transparent;
  stroke-width: 14;
  vector-effect: non-scaling-stroke;
  pointer-events: stroke;
  cursor: pointer;
}

.tape-point,
.tape-hover-point {
  fill: #ffffff;
  stroke: #b66108;
  stroke-width: 2.4;
  vector-effect: non-scaling-stroke;
}

.tape-point {
  pointer-events: all;
  cursor: pointer;
  transition: fill 120ms ease, stroke 120ms ease, filter 120ms ease;
}

.tape-overlay.move-mode .tape-point {
  cursor: -webkit-grab;
  cursor: grab;
}

.tape-overlay.move-mode .tape-point:active {
  /* The hand would hide the point it moves; while dragging the crosshair shows where it lands (#943). */
  cursor: crosshair;
  fill: #f6f1e8;
  filter: drop-shadow(0 0 4px rgba(129, 67, 0, 0.4));
}

.tape-overlay.delete-mode .tape-segment-group:hover .tape-segment,
.tape-overlay.quick-delete .tape-segment-group:hover .tape-segment {
  stroke: var(--hover-accent-color);
  stroke-width: 3;
  filter: drop-shadow(0 0 2px rgba(220, 63, 54, 0.3));
}

.tape-overlay.delete-mode .tape-point:hover,
.tape-overlay.quick-delete .tape-point:hover {
  fill: #fff0ee;
  stroke: var(--hover-accent-color);
  filter: drop-shadow(0 0 3px rgba(220, 63, 54, 0.36));
}

.tape-point.pending {
  fill: #cf6e09;
  stroke: #ffffff;
  filter: drop-shadow(0 0 3px rgba(113, 58, 0, 0.72));
}

.tape-hover-point {
  fill: rgba(155, 80, 0, 0.28);
  stroke-dasharray: 3 2;
  pointer-events: none;
}

.tape-hover-edge {
  fill: none;
  stroke: #e17709;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 3px rgba(173, 89, 0, 0.48));
  pointer-events: none;
}

.tape-label {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 46px;
  padding: 5px 9px;
  color: #3a2816;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(224, 208, 190, 0.96);
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(58, 40, 20, 0.12);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

/* Hovering the label shows the reach along each axis, or brings a faded one back; any other label lets clicks through to the view. */
.tape-label.has-deltas,
.tape-label.occluded {
  pointer-events: auto;
  cursor: default;
}

/* Mostly behind a body: still readable, but it no longer looks like it floats in front. */
.tape-label.occluded,
.tape-segment-group.occluded,
.tape-mark.occluded {
  opacity: 0.4;
  transition: opacity 160ms ease;
}

.tape-label.occluded.hovered,
.tape-segment-group.occluded.hovered,
.tape-segment-group.occluded:hover,
.tape-mark.occluded.hovered {
  opacity: 1;
}

/* The axes a measurement runs along: X, XY, 3D. */
.tape-label-axes {
  color: #ad5900;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* A measurement with a body at one end: a click types a length and moves that body (#823). */
.tape-label.editable {
  font-family: inherit;
  pointer-events: auto;
  cursor: text;
}

.tape-label.editable:hover,
.tape-label.editable:focus-visible {
  color: #ad5900;
  border-color: #ad5900;
}

/* Hover tips: a measurement's reach along each axis, a point's coordinates. */
.tape-tip {
  position: absolute;
  z-index: 4;
  padding: 4px 8px;
  color: #ffffff;
  background: rgba(40, 30, 20, 0.92);
  border-radius: 6px;
  font-size: 12px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  white-space: pre;
  pointer-events: none;
  transform: translate(-50%, 0);
}

.tape-tip.above {
  transform: translate(-50%, -100%);
}

/* The middle of a measurement, as big as a point: its lower half filled says "half way" (#323). */
.tape-mark {
  position: absolute;
  z-index: 3;
  width: 11px;
  height: 11px;
  padding: 0;
  background: linear-gradient(to bottom, #ffffff 50%, #b66108 50%);
  border: 2px solid #b66108;
  border-radius: 999px;
  cursor: pointer;
  pointer-events: auto;
  transform: translate(-50%, -50%);
}

/* A finger needs more to aim at than the mark shows. */
.tape-mark::before {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 999px;
}

.tape-mark:hover,
.tape-mark:focus-visible {
  border-color: #e17709;
  background: linear-gradient(to bottom, #ffffff 50%, #e17709 50%);
  filter: drop-shadow(0 0 3px rgba(173, 89, 0, 0.48));
}

/* Dark and graphite: the brown line vanished on the dark workplane. */
html[data-theme="dark"] .tape-segment {
  stroke: #f2a65a;
}

html[data-theme="dark"] .tape-segment-casing {
  stroke: rgba(0, 0, 0, 0.6);
}

html[data-theme="dark"] .tape-tip {
  color: #1f1a15;
  background: rgba(250, 246, 240, 0.95);
}

/*!**************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/myShapes.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Custom shapes on top of the shape library (#109): MyShapesSection.tsx.
 * Moved out of globals.css; loaded right after it by layout.tsx.
 */

.my-shapes-section {
  border-bottom: 1px solid #efe7d9;
  background: #fffdf9;
}

.my-shapes-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px 8px 8px;
}

.my-shapes-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  color: #604529;
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}

.my-shapes-toggle:hover {
  background: #f6efe4;
}

.my-shapes-toggle svg {
  width: 16px;
  height: 16px;
}

.my-shapes-count {
  min-width: 20px;
  padding: 1px 6px;
  color: #6b4f30;
  background: #efe4d3;
  border-radius: 999px;
  font-size: 12px;
  text-align: center;
}

.my-shapes-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.my-shapes-save-button,
.my-shapes-icon-button,
.my-shapes-name-form button {
  display: inline-flex;
  height: 30px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 10px;
  color: #5c442c;
  background: #fbfaf8;
  border: 1px solid #dccdbe;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}

.my-shapes-icon-button {
  width: 30px;
  padding: 0;
}

.my-shapes-save-button svg,
.my-shapes-icon-button svg {
  width: 16px;
  height: 16px;
}

.my-shapes-save-button:hover:not(:disabled),
.my-shapes-icon-button:hover:not(:disabled),
.my-shapes-name-form button:hover:not(:disabled) {
  background: #fff;
  border-color: #c9b49c;
}

.my-shapes-save-button:disabled,
.my-shapes-icon-button:disabled {
  cursor: default;
  opacity: 0.45;
}

.my-shapes-body {
  padding: 0 8px 8px;
}

.my-shapes-body .my-shapes-list {
  padding: 0;
}

.my-shapes-empty {
  margin: 0;
  padding: 2px 8px 6px;
  color: #7b6249;
  font-size: 13px;
  line-height: 1.4;
}

.my-shapes-name-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 0 0 8px;
}

.my-shapes-name-form label {
  color: #6b4f30;
  font-size: 13px;
  font-weight: 700;
}

.my-shapes-name-form input,
.my-shape-rename input,
.attachment-rename input,
.my-shapes-folder-rename input {
  flex: 1 1 100px;
  min-width: 0;
  height: 30px;
  padding: 0 8px;
  color: #3f2e1c;
  background: #fff;
  border: 1px solid #cdb9a2;
  border-radius: 4px;
  font-size: 14px;
}

.my-shapes-name-form button[type="submit"] {
  color: #fff;
  background: #a8662a;
  border-color: #a8662a;
}

.my-shapes-name-form button[type="submit"]:hover:not(:disabled) {
  background: #94571f;
  border-color: #94571f;
}

.my-shape-tile {
  position: relative;
  min-width: 0;
}

.my-shape-tile .shape-menu-item {
  width: 100%;
}

.my-shape-tile .shape-menu-item img,
.my-shape-no-preview,
.my-shape-rename img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.my-shape-no-preview {
  flex: 0 0 auto;
  display: block;
  background: #f1eadf;
  border-radius: 6px;
}

.my-shape-tile-actions {
  position: absolute;
  top: 50%;
  right: 6px;
  display: flex;
  gap: 2px;
  padding: 3px;
  background: rgba(255, 255, 255, 0.94);
  border-radius: 6px;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 120ms ease;
}

.my-shape-tile:hover .my-shape-tile-actions,
.my-shape-tile:focus-within .my-shape-tile-actions,
.my-shape-tile-actions:has(.danger) {
  opacity: 1;
}

/* Without a mouse the buttons are always there, so the name makes room. */
@media (hover: none) {
  .my-shape-tile-actions {
    opacity: 1;
  }

  .my-shape-tile .shape-menu-item {
    padding-right: 62px;
  }

  .my-shape-tile .shape-menu-item:has(+ .my-shape-tile-actions[data-count="3"]) {
    padding-right: 90px;
  }

  .my-shape-tile .shape-menu-item:has(+ .my-shape-tile-actions[data-count="4"]) {
    padding-right: 118px;
  }

  .my-shapes-folder-actions {
    opacity: 1;
  }

  .my-shapes-folder-toggle {
    padding-right: 90px;
  }
}

.my-shape-tile-action {
  display: inline-flex;
  min-width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  color: #6b4f30;
  background: #fff;
  border: 1px solid #e3d6c6;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}

.my-shape-tile-action svg {
  width: 14px;
  height: 14px;
}

.my-shape-tile-action:hover {
  border-color: #c9b49c;
}

.my-shape-tile-action.danger {
  color: #fff;
  background: #b42318;
  border-color: #b42318;
}

.my-shapes-location {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid #dccdbe;
  border-radius: 4px;
}

.my-shapes-name-form .my-shapes-location button {
  height: 28px;
  border: 0;
  border-radius: 0;
  font-weight: 700;
}

.my-shapes-name-form .my-shapes-location button + button {
  border-left: 1px solid #dccdbe;
}

.my-shapes-name-form .my-shapes-location button.active {
  color: #fff;
  background: #7d6245;
}

.my-shapes-group + .my-shapes-group {
  margin-top: 8px;
}

.my-shapes-group-title {
  padding: 0 4px 4px;
  color: #8a6d4c;
  font-size: 12px;
  font-weight: 600;
}


.my-shape-rename {
  display: flex;
  min-height: 58px;
  align-items: center;
  gap: 8px;
  padding: 5px 6px 5px 7px;
  background: #fff;
  border: 1px solid #dccdbe;
  border-radius: 4px;
}

/* Folders of custom shapes: a row that opens, with its shapes indented below. */
.my-shapes-folder + .my-shapes-folder {
  margin-top: 2px;
}

.my-shapes-folder + .my-shapes-list {
  margin-top: 6px;
}

.my-shapes-folder-header {
  position: relative;
  display: flex;
  min-height: 34px;
  align-items: center;
}

.my-shapes-folder-toggle {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 34px;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  color: #604529;
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
}

.my-shapes-folder-toggle:hover {
  background: #f6efe4;
}

.my-shapes-folder-toggle svg,
.my-shapes-folder-rename > svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.my-shapes-folder-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-shapes-folder-actions {
  position: absolute;
  top: 50%;
  right: 4px;
  display: flex;
  gap: 2px;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 120ms ease;
}

.my-shapes-folder-header:hover .my-shapes-folder-actions,
.my-shapes-folder-header:focus-within .my-shapes-folder-actions,
.my-shapes-folder-actions:has(.danger) {
  opacity: 1;
}

.my-shapes-folder-rename {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 6px;
  padding: 2px 4px 2px 6px;
  color: #604529;
}

/* Each level moves in a little; three levels still leave room for the names. */
.my-shapes-folder-body {
  margin: 2px 0 6px 14px;
}

.my-shapes-folder-select,
.my-shape-move-select {
  height: 30px;
  max-width: 100%;
  padding: 0 6px;
  color: #3f2e1c;
  background: #fff;
  border: 1px solid #cdb9a2;
  border-radius: 4px;
  font-size: 13px;
}

.my-shape-move-select {
  height: 26px;
  max-width: 150px;
  font-size: 12px;
}

.my-shapes-form-problem {
  flex: 1 0 100%;
  color: #b42318;
  font-size: 12px;
}

html[data-theme="dark"] .my-shapes-section {
  background: rgba(52, 40, 28, 0.6);
  border-color: #594a3a;
}

html[data-theme="dark"] .my-shapes-toggle,
html[data-theme="dark"] .my-shapes-name-form label {
  color: #f0e7d9;
}

html[data-theme="dark"] .my-shapes-toggle:hover {
  background: #463625;
}

html[data-theme="dark"] .my-shapes-count {
  color: #f0e7d9;
  background: #5b4733;
}

html[data-theme="dark"] .my-shapes-empty {
  color: #cdbca6;
}

html[data-theme="dark"] .my-shapes-save-button,
html[data-theme="dark"] .my-shapes-icon-button,
html[data-theme="dark"] .my-shapes-name-form button,
html[data-theme="dark"] .my-shape-tile-action,
html[data-theme="dark"] .my-shape-rename {
  color: #ede4d4;
  background: #3a2c1f;
  border-color: #5b4b3a;
}

html[data-theme="dark"] .my-shapes-save-button:hover:not(:disabled),
html[data-theme="dark"] .my-shapes-icon-button:hover:not(:disabled),
html[data-theme="dark"] .my-shapes-name-form button:hover:not(:disabled),
html[data-theme="dark"] .my-shape-tile-action:hover {
  background: #463625;
  border-color: #7a644c;
}

html[data-theme="dark"] .my-shapes-name-form button[type="submit"] {
  color: #fff;
  background: #a8662a;
  border-color: #a8662a;
}

html[data-theme="dark"] .my-shapes-name-form input,
html[data-theme="dark"] .my-shape-rename input,
html[data-theme="dark"] .attachment-rename input {
  color: #f0e7d9;
  background: #2c2117;
  border-color: #6b5741;
}

html[data-theme="dark"] .my-shape-no-preview {
  background: #463625;
}

html[data-theme="dark"] .my-shape-tile-action.danger {
  color: #fff;
  background: #b42318;
  border-color: #b42318;
}

html[data-theme="dark"] .my-shapes-location,
html[data-theme="dark"] .my-shapes-name-form .my-shapes-location button + button {
  border-color: #5b4b3a;
}

html[data-theme="dark"] .my-shapes-name-form .my-shapes-location button.active {
  color: #fff;
  background: #8a6a46;
}

html[data-theme="dark"] .my-shapes-group-title {
  color: #cdbca6;
}

html[data-theme="dark"] .my-shape-tile-actions {
  background: rgba(58, 44, 31, 0.94);
}

html[data-theme="dark"] .my-shapes-folder-toggle,
html[data-theme="dark"] .my-shapes-folder-rename {
  color: #f0e7d9;
}

html[data-theme="dark"] .my-shapes-folder-toggle:hover {
  background: #463625;
}

html[data-theme="dark"] .my-shapes-folder-rename input,
html[data-theme="dark"] .my-shapes-folder-select,
html[data-theme="dark"] .my-shape-move-select {
  color: #f0e7d9;
  background: #2c2117;
  border-color: #6b5741;
}

html[data-theme="dark"] .my-shapes-form-problem {
  color: #ff8a80;
}

/*!*****************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/attachments.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************/
/*
 * The attachments (#820): the clip's dot in the Manage toolbar and the panel with the list of files
 * kept with a design. The upload button is the Import panel's, and the small buttons are the ones
 * of the My shapes list.
 */

/*
 * The dot on the clip while a design has attachments: the orange of the badge on the visibility
 * button, smaller because it only says "there are some", not how many (the button's name does).
 */
.action-icon-button.has-attachments {
  position: relative;
}

.attachments-indicator {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 10px;
  height: 10px;
  background: #d9730d;
  border: 2px solid #fffaf2;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(60, 40, 10, 0.35);
  pointer-events: none;
}

html[data-theme="dark"] .attachments-indicator {
  border-color: #2a2118;
}

.attachments-panel {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.attachments-list {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.attachment-row {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto auto;
  align-items: center;
  grid-gap: 8px;
  gap: 8px;
  padding: 6px 8px;
  background: #fff;
  border: 1px solid #ebe1cf;
  border-radius: 8px;
}

.attachment-row > svg {
  width: 16px;
  height: 16px;
  color: #8e7a66;
}

.attachment-name {
  overflow: hidden;
  color: #5a3917;
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-row small {
  color: #8e7a66;
  font-size: 11px;
  font-weight: 700;
}

.attachment-actions,
.attachment-clash-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.attachments-note {
  margin: 0;
  color: #7b6249;
  font-size: 12px;
  line-height: 1.4;
}

.attachment-clash {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  padding: 10px 12px;
  color: #5a3917;
  background: #fff7ec;
  border: 1px solid #e3b98f;
  border-radius: 8px;
}

.attachment-clash p {
  display: grid;
  grid-gap: 2px;
  gap: 2px;
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
}

.attachment-clash small {
  color: #8e7a66;
  font-size: 11px;
  font-weight: 700;
}

.attachment-rename {
  display: flex;
  align-items: center;
  gap: 4px;
}

.attachment-rename input[aria-invalid="true"] {
  border-color: #b42318;
}

html[data-theme="dark"] .attachment-row {
  background: #35281b;
  border-color: #5e4c3a;
}

html[data-theme="dark"] .attachment-row > svg,
html[data-theme="dark"] .attachment-row small,
html[data-theme="dark"] .attachment-clash small {
  color: #b9a58f;
}

html[data-theme="dark"] .attachment-name {
  color: #f0e7d9;
}

html[data-theme="dark"] .attachments-note {
  color: #cdbca6;
}

html[data-theme="dark"] .attachment-clash {
  color: #f0e7d9;
  background: #3a2c1f;
  border-color: #7a5b35;
}

/*
 * The attachment viewer (#820, phase 2): the quick guide's window, narrower because it holds one
 * column of reading text, and as tall as the file needs up to the window's own limit.
 */
.attachment-viewer .shortcuts-modal-card {
  width: min(760px, calc(100vw - 32px));
}

/* The text scrolls and the footer stays under it (the shortcut list has its search above instead). */
.attachment-viewer .shortcuts-modal-card .workspace-modal-content {
  grid-template-rows: minmax(0, 1fr) auto;
}

.attachment-viewer .workspace-modal-header strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-viewer .workspace-modal-footer {
  min-height: 0;
}

.attachment-viewer-body {
  display: block;
}

/* A text file is shown exactly as written, its lines wrapped to the window rather than cut off. */
.attachment-viewer-text {
  margin: 0;
  color: #3f2e1c;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/*
 * A picture, whole and at most its own size: shrunk to the width of the window and to a height that
 * leaves the window on the screen, never stretched, and centred when it is smaller.
 */
.attachment-viewer-image {
  display: block;
  max-width: 100%;
  max-height: min(70vh, 720px);
  margin: 0 auto;
  object-fit: contain;
}

/* A Markdown file, formatted: sizes and spacing for reading, in the colours of the editor's text. */
.markdown-view {
  color: #3f2e1c;
  font-size: 14px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.markdown-view > :first-child {
  margin-top: 0;
}

.markdown-view > :last-child {
  margin-bottom: 0;
}

.markdown-view h1,
.markdown-view h2,
.markdown-view h3,
.markdown-view h4,
.markdown-view h5,
.markdown-view h6 {
  margin: 1.2em 0 0.5em;
  color: #5a3917;
  line-height: 1.25;
}

.markdown-view h1 {
  padding-bottom: 6px;
  border-bottom: 1px solid #ebe1cf;
  font-size: 22px;
}

.markdown-view h2 {
  font-size: 18px;
}

.markdown-view h3 {
  font-size: 16px;
}

.markdown-view h4,
.markdown-view h5,
.markdown-view h6 {
  font-size: 14px;
}

.markdown-view p,
.markdown-view ul,
.markdown-view ol,
.markdown-view blockquote,
.markdown-view pre,
.markdown-view .markdown-table {
  margin: 0 0 0.8em;
}

/* The editor's own lists have no bullets; a file's lists keep theirs. */
.markdown-view ul,
.markdown-view ol {
  padding-left: 22px;
}

.markdown-view ul {
  list-style: disc;
}

.markdown-view ol {
  list-style: decimal;
}

.markdown-view li {
  display: list-item;
}

.markdown-view li > ul,
.markdown-view li > ol,
.markdown-view li > p {
  margin: 0.2em 0;
}

/* A task: its tick box in place of the bullet. */
.markdown-view li.markdown-task {
  list-style: none;
}

.markdown-view li.markdown-task > input {
  margin: 0 6px 0 -20px;
  vertical-align: -1px;
  accent-color: #d46b08;
}

.markdown-view blockquote {
  padding: 2px 0 2px 12px;
  color: #6f5840;
  border-left: 3px solid #e3b98f;
}

.markdown-view code {
  padding: 1px 4px;
  background: #f6f2ed;
  border-radius: 4px;
  font-size: 0.92em;
}

.markdown-view pre {
  padding: 10px 12px;
  overflow: auto;
  background: #f6f2ed;
  border: 1px solid #ebe1cf;
  border-radius: 6px;
}

.markdown-view pre code {
  padding: 0;
  background: none;
}

.markdown-view hr {
  margin: 1.2em 0;
  border: 0;
  border-top: 1px solid #ebe1cf;
}

.markdown-view a {
  color: #8f4700;
}

.markdown-table {
  overflow-x: auto;
}

.markdown-view table {
  border-collapse: collapse;
  font-size: 13px;
}

.markdown-view th,
.markdown-view td {
  padding: 5px 10px;
  border: 1px solid #ebe1cf;
}

.markdown-view th {
  background: #fff7ec;
}

/* A picture that is not loaded: its description in a small box, the address in the tooltip. */
.markdown-image {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 6px;
  color: #7b6249;
  background: #f6f2ed;
  border: 1px dashed #d8c7b1;
  border-radius: 4px;
  font-size: 0.92em;
}

.markdown-image svg {
  width: 14px;
  height: 14px;
  flex: none;
}

html[data-theme="dark"] .attachment-viewer-text,
html[data-theme="dark"] .markdown-view {
  color: #eee6d7;
}

html[data-theme="dark"] .markdown-view h1,
html[data-theme="dark"] .markdown-view h2,
html[data-theme="dark"] .markdown-view h3,
html[data-theme="dark"] .markdown-view h4,
html[data-theme="dark"] .markdown-view h5,
html[data-theme="dark"] .markdown-view h6 {
  color: #f0e7d9;
}

html[data-theme="dark"] .markdown-view h1,
html[data-theme="dark"] .markdown-view hr,
html[data-theme="dark"] .markdown-view pre,
html[data-theme="dark"] .markdown-view th,
html[data-theme="dark"] .markdown-view td {
  border-color: #5e4c3a;
}

html[data-theme="dark"] .markdown-view blockquote {
  color: #cdbca6;
  border-left-color: #7a5b35;
}

html[data-theme="dark"] .markdown-view code,
html[data-theme="dark"] .markdown-view pre,
html[data-theme="dark"] .markdown-image {
  background: #35281b;
}

html[data-theme="dark"] .markdown-view pre code {
  background: none;
}

html[data-theme="dark"] .markdown-view th {
  background: #3a2c1f;
}

html[data-theme="dark"] .markdown-view a {
  color: #f3a452;
}

html[data-theme="dark"] .markdown-image {
  color: #cdbca6;
  border-color: #7a5b35;
}

/*!**************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/viewCube.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************/
/* The view cube's styles, kept apart from globals.css. layout.tsx imports
   this file after globals.css; the rules that moved here are the cube's own,
   so the order changes nothing for anything else.
   scripts/generate-graphite-theme.mjs reads it after globals.css. */

/* The placeholder cube of the loading screen. */
.editor-loading-view-cube {
  position: absolute;
  top: 22px;
  left: 28px;
  z-index: 2;
  width: 82px;
  height: 82px;
}

.editor-loading-view-cube span {
  position: absolute;
  border-radius: 5px;
}

.editor-loading-cube-top {
  top: 3px;
  left: 13px;
  width: 56px;
  height: 39px;
  -webkit-clip-path: polygon(50% 0, 100% 38%, 50% 100%, 0 38%);
          clip-path: polygon(50% 0, 100% 38%, 50% 100%, 0 38%);
}

.editor-loading-cube-left {
  top: 28px;
  left: 9px;
  width: 35px;
  height: 48px;
  -webkit-clip-path: polygon(0 0, 100% 21%, 100% 100%, 0 79%);
          clip-path: polygon(0 0, 100% 21%, 100% 100%, 0 79%);
}

.editor-loading-cube-right {
  top: 28px;
  left: 44px;
  width: 35px;
  height: 48px;
  -webkit-clip-path: polygon(0 21%, 100% 0, 100% 79%, 0 100%);
          clip-path: polygon(0 21%, 100% 0, 100% 79%, 0 100%);
}

.view-cube {
  position: absolute;
  top: 22px;
  /* Flush with the camera controls below it, so the left edge of the stage
     reads as one column instead of two slightly different indents. */
  left: 10px;
  /* Above the movable object list (10), which passes underneath. */
  z-index: 11;
  width: 82px;
  height: 82px;
  perspective: 420px;
  color: #afa294;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  filter: drop-shadow(0 2px 3px rgba(82, 64, 45, 0.14));
  opacity: 0.9;
  pointer-events: auto;
  /* Touch drags orbit the camera instead of scrolling the page. */
  touch-action: none;
}

.view-cube.dragging,
.view-cube.dragging .cube-face {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.view-cube-inner {
  position: relative;
  width: 58px;
  height: 58px;
  margin: 12px;
  transform-style: preserve-3d;
  transition: transform 80ms linear;
  will-change: transform;
}

.cube-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid #d7cdc3;
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.68);
}

.cube-face:hover,
.cube-face:focus-visible {
  color: #796148;
  border-color: #b68f65;
  outline: none;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.72),
    0 0 0 2px rgba(185, 118, 46, 0.18);
}

.cube-top {
  transform: rotateX(-90deg) translateZ(29px);
  background: rgba(252, 250, 248, 0.94);
}

.cube-bottom {
  transform: rotateX(90deg) translateZ(29px);
  color: #bcb1a6;
  background: rgba(247, 243, 238, 0.9);
}

.cube-front {
  transform: translateZ(29px);
  color: #a49686;
}

.cube-back {
  transform: rotateY(180deg) translateZ(29px);
  color: #bcb1a6;
}

.cube-right {
  transform: rotateY(90deg) translateZ(29px);
}

.cube-left {
  transform: rotateY(-90deg) translateZ(29px);
}

/* The bands along a face's sides and its corners look from that edge or corner (#202). */
.cube-zone {
  position: absolute;
  cursor: pointer;
}

.cube-zone:hover {
  background: rgba(185, 118, 46, 0.26);
}

/* A narrow window: the cube shrinks a little and moves closer to the edge. */
@media (max-width: 640px) {
  .view-cube {
    left: 6px;
    transform: scale(0.82);
    transform-origin: top left;
  }
}

/* A flat window: the cube shrinks so the camera controls below it fit. */
@media (max-height: 780px) {
  .view-cube {
    transform: scale(0.8);
    transform-origin: top left;
  }
}

html[data-theme="dark"] .cube-face {
  color: #c1a991;
  background: rgba(56, 44, 31, 0.94);
  border-color: #736353;
  box-shadow: inset 0 0 0 1px rgba(221, 198, 173, 0.08);
}

html[data-theme="dark"] .cube-top {
  color: #eee6d7;
  background: rgba(70, 56, 42, 0.96);
}

html[data-theme="dark"] .cube-bottom {
  color: #8c7761;
  background: rgba(42, 32, 21, 0.94);
}

html[data-theme="dark"] .cube-face:hover,
html[data-theme="dark"] .cube-face:focus-visible {
  color: #faf7f2;
  border-color: #d48636;
  box-shadow: inset 0 0 0 1px rgba(218, 141, 57, 0.2), 0 0 0 2px rgba(199, 122, 40, 0.16);
}

html[data-theme="dark"] .cube-zone:hover {
  background: rgba(212, 134, 54, 0.34);
}

/* ---------------------------------------------------------------------------
   The cube's corner (Settings > View cube position, lib/viewCubePosition.ts).
   Top left is the plain stylesheet and carries no attribute. In any other
   corner the camera controls move up into the spot the cube left.
   A phone-wide window has no room for it: the setting is hidden there and the
   cube stays in the top left.
   ------------------------------------------------------------------------- */
@media (min-width: 641px) {
  html[data-view-cube-position] .camera-controls {
    top: 22px;
  }

  html[data-view-cube-position="top-right"] .view-cube,
  html[data-view-cube-position="bottom-right"] .view-cube {
    right: 10px;
    left: auto;
  }

  html[data-view-cube-position="bottom-left"] .view-cube,
  html[data-view-cube-position="bottom-right"] .view-cube {
    top: auto;
    bottom: 12px;
  }

  /* Bottom right stands on the snap grid control (bottom 11px, 22px tall). */
  html[data-view-cube-position="bottom-right"] .view-cube {
    bottom: 36px;
  }

  /* The smaller cube of a narrow or flat window shrinks toward its own corner. */
  html[data-view-cube-position="top-right"] .view-cube {
    transform-origin: top right;
  }

  html[data-view-cube-position="bottom-left"] .view-cube {
    transform-origin: bottom left;
  }

  html[data-view-cube-position="bottom-right"] .view-cube {
    transform-origin: bottom right;
  }

  /* The snap menu opens upward, over the cube rather than under it. */
  html[data-view-cube-position="bottom-right"] .grid-settings {
    z-index: 12;
  }

  /* The docked inspector covers the right edge, so a cube there steps left of
     it. A minimized inspector covers only the top. */
  html[data-view-cube-position="top-right"] .workplane-stage:has(.shape-inspector:not(.floating)) .view-cube,
  html[data-view-cube-position="bottom-right"] .workplane-stage:has(.shape-inspector:not(.floating):not(.minimized)) .view-cube {
    right: 330px;
  }

  /* The loading screen shows the cube and the controls where they will be. */
  html[data-view-cube-position] .editor-loading-viewport-controls {
    top: 75px;
  }

  html[data-view-cube-position="top-right"] .editor-loading-view-cube,
  html[data-view-cube-position="bottom-right"] .editor-loading-view-cube {
    right: 28px;
    left: auto;
  }

  html[data-view-cube-position="bottom-left"] .editor-loading-view-cube {
    top: auto;
    bottom: 12px;
  }

  html[data-view-cube-position="bottom-right"] .editor-loading-view-cube {
    top: auto;
    bottom: 36px;
  }
}

@media (max-width: 640px) {
  .view-cube-position-setting {
    display: none;
  }
}

/*!****************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/secondView.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************/
/* The second view's window (components/workplane/SecondViewWindow.tsx). It
   takes the editor's stylesheets, so the view cube looks the same there. */

.second-view-root,
.second-view-stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--background);
}

.second-view-canvas {
  position: absolute;
  inset: 0;
}

.second-view-canvas canvas {
  display: block;
}

/* The cube's corner follows the setting (viewCube.css) at any width here: the
   3D view keeps it top left in a phone-wide window, but this window is never
   on a phone, only made narrow. Nothing stands in the bottom right corner here,
   so both bottom corners sit 12 px up. */
html[data-view-cube-position] .second-view-stage .camera-controls {
  top: 22px;
}

html[data-view-cube-position="top-right"] .second-view-stage .view-cube,
html[data-view-cube-position="bottom-right"] .second-view-stage .view-cube {
  right: 10px;
  left: auto;
}

html[data-view-cube-position="bottom-left"] .second-view-stage .view-cube,
html[data-view-cube-position="bottom-right"] .second-view-stage .view-cube {
  top: auto;
  bottom: 12px;
}

html[data-view-cube-position="top-right"] .second-view-stage .view-cube {
  transform-origin: top right;
}

html[data-view-cube-position="bottom-left"] .second-view-stage .view-cube {
  transform-origin: bottom left;
}

html[data-view-cube-position="bottom-right"] .second-view-stage .view-cube {
  transform-origin: bottom right;
}

/* A container of its own name: the 3D view's two-column rule (globals.css,
   "@container workplane") is measured for its longer bar and does not apply here. */
.second-view-stage {
  container: second-view / size;
}

/* The bar here has seven buttons. Below 780 px of window it is scaled to 88%
   and starts 96 px down (globals.css), so one column needs about 380 px at
   Medium, 450 at Large and 320 at Small. Only lower than that does it take
   two columns, the zoom pair side by side as in the 3D view. */
@container second-view (max-height: 400px) {
  html:not([data-toolbar-size="small"]) .second-view-stage .camera-controls {
    display: grid;
    grid-template-columns: repeat(2, auto);
    transform: none;
  }

  html:not([data-toolbar-size="small"]) .second-view-stage .camera-controls > .camera-zoom-button {
    order: 1;
  }

  html:not([data-toolbar-size="small"]) .second-view-stage .camera-controls > .workplane-display-control-group {
    order: 2;
  }
}

@container second-view (max-height: 470px) {
  html[data-toolbar-size="large"] .second-view-stage .camera-controls {
    display: grid;
    grid-template-columns: repeat(2, auto);
    transform: none;
  }

  html[data-toolbar-size="large"] .second-view-stage .camera-controls > .camera-zoom-button {
    order: 1;
  }

  html[data-toolbar-size="large"] .second-view-stage .camera-controls > .workplane-display-control-group {
    order: 2;
  }
}

@container second-view (max-height: 340px) {
  html[data-toolbar-size="small"] .second-view-stage .camera-controls {
    display: grid;
    grid-template-columns: repeat(2, auto);
    transform: none;
  }

  html[data-toolbar-size="small"] .second-view-stage .camera-controls > .camera-zoom-button {
    order: 1;
  }

  html[data-toolbar-size="small"] .second-view-stage .camera-controls > .workplane-display-control-group {
    order: 2;
  }
}

/* The status message (globals.css .editor-status), placed for this window:
   it has no toolbar above it, and no settings panel on the right. */
.second-view-stage .second-view-notice {
  top: 22px;
  max-width: calc(100vw - 130px);
}

/*!***************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/shortcuts.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************/
/* The keyboard shortcut list. It borrows the workspace modal's card and
   header; only the list itself is its own. */
.shortcuts-modal {
  position: fixed;
  z-index: 60;
  padding-top: 46px;
}

.shortcuts-modal-card {
  display: grid;
  width: min(1080px, calc(100vw - 32px));
  height: auto;
  max-height: min(860px, calc(100vh - 92px));
  grid-template-rows: auto minmax(0, 1fr);
}

.shortcuts-modal[data-compact="true"] .shortcuts-modal-card {
  width: min(560px, calc(100vw - 32px));
}

.shortcuts-modal[data-compact="true"] .shortcuts-groups {
  columns: 1;
}

/* The search sits above the list and stays put while the list scrolls. */
.shortcuts-modal-card .workspace-modal-content {
  height: auto;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
}

.shortcuts-search {
  padding: 14px 24px 0;
}

.shortcuts-search-box {
  position: relative;
  display: flex;
  align-items: center;
  width: min(100%, 420px);
}

.shortcuts-search-icon {
  position: absolute;
  left: 10px;
  color: #a3917f;
  pointer-events: none;
}

.shortcuts-search-input {
  width: 100%;
  padding: 7px 32px 7px 34px;
  color: inherit;
  background: #ffffff;
  border: 1px solid #e2d9cd;
  border-radius: 6px;
  outline: none;
  font-size: 13px;
  transition: border-color 120ms ease;
}

.shortcuts-search-input:focus {
  border-color: #d46b08;
}

.shortcuts-search-clear {
  position: absolute;
  right: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  color: #a3917f;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

.shortcuts-search-clear:hover {
  color: #563e24;
  background: #f3ece2;
}

.shortcuts-no-matches {
  margin: 0;
  color: #a3917f;
  font-size: 12.5px;
  font-weight: 600;
}

.shortcuts-modal-body {
  gap: 18px;
}

.shortcuts-intro {
  margin: 0;
  color: #7a6550;
  font-size: 12.5px;
  font-weight: 600;
}

.shortcuts-groups {
  columns: 300px;
  column-gap: 30px;
}

.shortcuts-group {
  display: grid;
  align-content: start;
  grid-gap: 7px;
  gap: 7px;
  margin-bottom: 15px;
  page-break-inside: avoid;
  break-inside: avoid;
}

.shortcuts-group h3 {
  margin: 0;
  padding-bottom: 7px;
  color: #543b21;
  border-bottom: 1px solid #f0eae0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.shortcuts-group dl {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  margin: 0;
}

.shortcuts-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 3px 12px;
}

.shortcuts-row dt {
  min-width: 0;
  margin: 0;
  flex: 1 1 auto;
  color: #6c5a48;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: break-word;
}

.shortcuts-row dd {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin: 0 0 0 auto;
}

.shortcuts-combo {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.shortcuts-plus,
.shortcuts-or {
  color: #a4917c;
  font-size: 10.5px;
  font-weight: 700;
}

.shortcuts-row kbd {
  padding: 2px 6px;
  color: #5f4529;
  background: #f6f3ed;
  border: 1px solid #dacfc2;
  border-bottom-width: 2px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

html[data-theme="dark"] .shortcuts-search-input {
  color: #e5ded5;
  background: #1e1a16;
  border-color: #443a30;
}

html[data-theme="dark"] .shortcuts-search-input:focus {
  border-color: #f6ad55;
}

html[data-theme="dark"] .shortcuts-search-clear:hover {
  color: #f1eadd;
  background: #3a2e22;
}

html[data-theme="dark"] .shortcuts-intro,
html[data-theme="dark"] .shortcuts-row dt {
  color: #cbbba6;
}

html[data-theme="dark"] .shortcuts-group h3 {
  color: #f1e6d4;
  border-bottom-color: #4a3b2c;
}

html[data-theme="dark"] .shortcuts-row kbd {
  color: #f1eadd;
  background: #322518;
  border-color: #635241;
}

html[data-theme="dark"] .shortcuts-plus,
html[data-theme="dark"] .shortcuts-or {
  color: #9b8a76;
}

/* The printed list of shortcuts (Print button of the window, or Ctrl+P while it is open): black on
   white and in large type, with nothing else of the app. The sheet is a child of the body, hidden on
   screen; while the attribute is on <html>, every other child of the body goes. */
.shortcuts-print-sheet {
  display: none;
}

@media print {
  /* The whole list on one side of a sheet, as a reference to keep at hand (#490): three columns in smaller, still sharp type. */
  @page {
    margin: 10mm;
  }

  html[data-print-shortcuts],
  html[data-print-shortcuts] body {
    height: auto !important;
    overflow: visible !important;
    background: #fff !important;
    color: #000 !important;
  }

  html[data-print-shortcuts] body > *:not(.shortcuts-print-sheet) {
    display: none !important;
  }

  html[data-print-shortcuts] .shortcuts-print-sheet {
    display: block;
    color: #000;
    background: #fff;
    font-size: 9pt;
    /* The arrows must not turn into coloured emoji on a black-and-white sheet. */
    font-variant-emoji: text;
  }

  /* No heading: the room is for the list. */
  html[data-print-shortcuts] .shortcuts-print-sheet h1 {
    display: none;
  }

  html[data-print-shortcuts] .shortcuts-print-sheet .shortcuts-groups {
    columns: 3;
    column-gap: 6mm;
  }

  /* A long group may run over into the next column; a heading never stays alone at the foot of one. */
  html[data-print-shortcuts] .shortcuts-print-sheet .shortcuts-group {
    margin-bottom: 3mm;
    page-break-inside: auto;
    break-inside: auto;
  }

  html[data-print-shortcuts] .shortcuts-print-sheet .shortcuts-group h3 {
    page-break-after: avoid;
    break-after: avoid;
    margin: 0 0 1mm;
    color: #000;
    border-bottom: 0.3mm solid #000;
    font-size: 9.5pt;
  }

  /* Plain blocks, not grids: a block fragments across the columns, a grid does not (the sketch's list is one long group). */
  html[data-print-shortcuts] .shortcuts-print-sheet .shortcuts-group {
    display: contents;
  }

  html[data-print-shortcuts] .shortcuts-print-sheet .shortcuts-group dl {
    display: block;
    margin: 0;
  }

  /* The name on the left, the keys on the right on one line where they fit, else the keys below the name. */
  html[data-print-shortcuts] .shortcuts-print-sheet .shortcuts-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0 2mm;
    padding-bottom: 0.7mm;
    margin-bottom: 0.7mm;
    border-bottom: 0.1mm solid #bbb;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  html[data-print-shortcuts] .shortcuts-print-sheet .shortcuts-row dd {
    flex: 0 1 auto;
    flex-wrap: wrap;
    gap: 0.8mm;
  }

  html[data-print-shortcuts] .shortcuts-print-sheet .shortcuts-row dt {
    line-height: 1.25;
  }

  html[data-print-shortcuts] .shortcuts-print-sheet .shortcuts-row dt {
    color: #000;
    font-size: 9pt;
    font-weight: 600;
  }

  html[data-print-shortcuts] .shortcuts-print-sheet .shortcuts-row kbd {
    color: #000;
    background: #fff;
    padding: 0 1.2mm;
    border: 0.25mm solid #000;
    border-bottom-width: 0.25mm;
    border-radius: 0.8mm;
    font-size: 8pt;
    line-height: 1.3;
    /* Fonts whose arrows are plain strokes, not coloured emoji. */
    font-family: "Segoe UI Symbol", "Apple Symbols", "DejaVu Sans", Arial, sans-serif;
  }

  html[data-print-shortcuts] .shortcuts-print-sheet .shortcuts-plus,
  html[data-print-shortcuts] .shortcuts-print-sheet .shortcuts-or {
    color: #000;
    font-size: 8.5pt;
  }
}

@media (max-width: 960px) {
  .shortcuts-modal {
    padding-top: 18px;
  }

  .shortcuts-modal-card {
    width: calc(100vw - 24px);
  }
}

/* In line with the list below it, whose padding the workspace modal narrows on smaller screens. */
@media (max-width: 1240px) {
  .shortcuts-search {
    padding-inline: 18px;
  }
}

@media (max-width: 640px) {
  .shortcuts-search {
    padding-inline: 16px;
  }
}

/*!*****************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/sketchImage.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************/
/* The reference image under a sketch (#216): its frame, handles and calibration marks on the plate, and its settings panel. */

.sketch-reference-images image {
  cursor: move;
  image-rendering: auto;
  transition: opacity 100ms ease;
}

.sketch-reference-images image:hover {
  filter: saturate(1.08) contrast(1.03);
}

.sketch-image-selection-box {
  fill: none;
  stroke: #da7409;
  stroke-width: 1.7;
  stroke-dasharray: 5 3;
  vector-effect: non-scaling-stroke;
}

.sketch-image-resize-handle {
  fill: #ffffff;
  stroke: #a3590b;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.sketch-image-resize-handle:hover {
  fill: #ffb24b;
  stroke: #9d4d00;
}

.sketch-image-resize-handle.handle-nw,
.sketch-image-resize-handle.handle-se {
  cursor: nwse-resize;
}

.sketch-image-resize-handle.handle-ne,
.sketch-image-resize-handle.handle-sw {
  cursor: nesw-resize;
}

.sketch-image-resize-handle.handle-n,
.sketch-image-resize-handle.handle-s {
  cursor: ns-resize;
}

.sketch-image-resize-handle.handle-e,
.sketch-image-resize-handle.handle-w {
  cursor: ew-resize;
}

/* Reference image (#216): crop handles and the calibration marks. */
.sketch-image-selection-box.cropping {
  stroke: #2f7f9e;
}

.sketch-image-resize-handle.crop {
  fill: #e7f4f9;
  stroke: #2f7f9e;
}

.sketch-image-resize-handle.crop:hover {
  fill: #9fd3e8;
}

/* The turning arrows beyond the corners of a picture or a selection: the 3D editor's rotate handle for the
   up axis (.rotate-handle.axis-z), the same arrow in the same blue with the same light edge. The arc and the
   heads take their strokes from .rotate-arrow-arc and .rotate-arrow-heads. */
.sketch-rotate-handle {
  --rotate-handle-axis: #2f6fe0;
  --rotate-handle-halo: rgba(255, 252, 247, 0.95);
  color: var(--rotate-handle-axis);
  cursor: -webkit-grab;
  cursor: grab;
  touch-action: none;
}

html[data-theme="dark"] .sketch-rotate-handle {
  --rotate-handle-axis: #6aa0ff;
  --rotate-handle-halo: rgba(28, 24, 20, 0.9);
}

/* A band along the arrow takes the pointer, never the corner square beside it (forum, 621826). */
.sketch-rotate-handle-hit {
  fill: none;
  stroke: transparent;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: stroke;
}

.sketch-rotate-handle svg {
  filter: drop-shadow(0 0 1px var(--rotate-handle-halo)) drop-shadow(0 0 1.5px var(--rotate-handle-halo));
}

/* Hovered, the arrow gets heavier. */
.sketch-rotate-handle:hover .rotate-arrow-arc {
  stroke-width: 3;
}

/* The padlock on a locked picture: a click unlocks it. */
.sketch-lock-badge {
  cursor: pointer;
  color: #7c6853;
}

.sketch-lock-badge rect {
  fill: rgba(255, 255, 255, 0.95);
  stroke: #a3590b;
  stroke-width: 1.2;
  filter: drop-shadow(0 1px 2px rgba(76, 51, 25, 0.2));
}

.sketch-lock-badge:hover {
  color: #9d4d00;
}

.sketch-lock-badge:hover rect {
  fill: #ffb24b;
}

.sketch-image-calibration circle {
  fill: rgba(255, 255, 255, 0.85);
  stroke: #2f7f9e;
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
}

.sketch-image-calibration line {
  stroke: #2f7f9e;
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
}

.sketch-image-action-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 8px;
  gap: 8px;
}

.sketch-image-hint {
  margin: -2px 0 0;
  color: #8d7b68;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}

/* No header above it, so it takes the bottom padding at the top too. */
.property-card.sketch-image-calibrate-card {
  padding-top: 18px;
}

.sketch-image-calibrate-field {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}

html[data-theme="dark"] .sketch-image-hint {
  color: #b7a992;
}

.sketch-image-dimension rect {
  fill: rgba(255, 255, 255, 0.97);
  stroke: rgba(139, 118, 95, 0.9);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 1px 2px rgba(76, 51, 25, 0.15));
}

.sketch-image-dimension text {
  fill: #5a3917;
  font-weight: 700;
  text-anchor: middle;
}

.sketch-image-inspector .shape-inspector-header strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sketch-image-inspector .inspector-header-icon.danger:hover {
  color: #c3262e;
  background: #fff0f1;
}

.sketch-image-inspector .inspector-header-icon:disabled {
  cursor: default;
  opacity: 0.38;
}

.sketch-image-preview-card {
  display: grid;
  place-items: center;
  grid-gap: 8px;
  gap: 8px;
  margin: 10px;
  padding: 14px;
  color: #907d6a;
  background: rgba(255, 255, 255, 0.98);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 750;
}

.sketch-image-preview-card img {
  display: block;
  width: 100%;
  height: 112px;
  object-fit: contain;
  background:
    linear-gradient(45deg, #f6f3ed 25%, transparent 25%),
    linear-gradient(-45deg, #f6f3ed 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #f6f3ed 75%),
    linear-gradient(-45deg, transparent 75%, #f6f3ed 75%);
  background-position: 0 0, 0 6px, 6px -6px, -6px 0;
  background-size: 12px 12px;
  border: 1px solid #e9e1d3;
  border-radius: 4px;
}

.sketch-image-inspector .property-card-header.static {
  cursor: default;
}

.sketch-image-inspector .property-card-header.static:hover {
  color: #5d4731;
}

.sketch-image-range-row {
  display: flex;
  align-items: center;
  gap: 7px;
}

.sketch-image-number-input,
.sketch-image-position-field input {
  width: 100%;
  height: 31px;
  padding: 0 10px;
  color: #746352;
  font: 700 14px/1 var(--font-ui);
  background: #ffffff;
  border: 1px solid #daccbe;
  border-radius: 999px;
  outline: 0;
}

.sketch-image-number-input:focus,
.sketch-image-position-field input:focus {
  border-color: #ea953d;
  box-shadow: 0 0 0 3px rgba(161, 83, 0, 0.14);
}

.sketch-image-range-row span {
  min-width: 26px;
  color: #988672;
  font-size: 12px;
}

.sketch-image-range > input[type="range"] {
  width: 100%;
  height: 12px;
  margin: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
  cursor: pointer;
}

.sketch-image-range > input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  background: linear-gradient(to right, #d27009 0 var(--slider-pos), #e8e3da var(--slider-pos) 100%);
  border-radius: 999px;
}

.sketch-image-range > input[type="range"]::-webkit-slider-thumb {
  width: 13px;
  height: 13px;
  margin-top: -4.5px;
  -webkit-appearance: none;
          appearance: none;
  background: #ffffff;
  border: 2px solid #ce6d09;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(90, 58, 23, 0.22);
}

.sketch-image-position-field {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: center;
  grid-gap: 9px;
  gap: 9px;
  color: #867563;
  font-size: 14px;
  font-weight: 650;
}

.sketch-image-aspect-toggle {
  display: flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #7c6853;
  background: #fcfaf7;
  border: 1px solid #ded1c4;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}

.sketch-image-aspect-toggle.active {
  color: #a55808;
  background: #f8f4ee;
  border-color: #d59c5f;
}

.sketch-image-aspect-toggle:disabled,
.sketch-image-position-field input:disabled,
.sketch-image-number-input:disabled {
  cursor: default;
  opacity: 0.52;
}

.sketch-reference-images image.locked {
  cursor: default;
}

/* Calibrating: the next two clicks mark points on the picture, so the pointer is a crosshair, not the move cross. */
.sketch-reference-images image.calibrating {
  cursor: crosshair;
}

/* The ring shown while turning in the sketch (forum, 621358): inside it the turn snaps to 22.5°, and then the
   ring is drawn in the handle's blue; outside it, faint. */
.sketch-turn-ring {
  --sketch-turn-ring: rgba(47, 111, 224, 0.35);
  --sketch-turn-ring-active: #2f6fe0;
  fill: none;
  stroke: var(--sketch-turn-ring);
}

.sketch-turn-ring.active {
  stroke: var(--sketch-turn-ring-active);
}

html[data-theme="dark"] .sketch-turn-ring {
  --sketch-turn-ring: rgba(106, 160, 255, 0.4);
  --sketch-turn-ring-active: #6aa0ff;
}

/* Trace: the outlines the settings give, over the picture, and their points. */
.sketch-trace-preview path.background {
  fill: var(--sketch-plate, #f5f0e7);
  fill-opacity: 0.88;
  stroke: none;
}

.sketch-trace-preview path {
  fill: rgba(229, 72, 77, 0.12);
  stroke: #e5484d;
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
}

.sketch-trace-preview circle,
.sketch-trace-preview rect {
  fill: #ffffff;
  stroke: #0b72b9;
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}

.sketch-trace-preview rect.corner {
  stroke: #e5484d;
}

/* Holes and areas over the outlines: a construction line dashed, the one pointed at in the list stronger. */
.sketch-trace-preview path.ring {
  fill: none;
  stroke: #e5484d;
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
}

.sketch-trace-preview path.ring.area {
  stroke: #1f8a4c;
}

.sketch-trace-preview path.ring.line {
  stroke-dasharray: 5 4;
}

.sketch-trace-preview path.ring.highlight {
  stroke: #f08a00;
  stroke-width: 3.4;
}

.sketch-reference-images image.trace-picking {
  cursor: crosshair;
}

.sketch-trace-parts .shell-opening-options {
  flex-wrap: wrap;
}

.sketch-trace-list {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}

.sketch-trace-list-title {
  font-size: 13px;
  font-weight: 700;
}

.sketch-trace-list ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-gap: 2px;
  gap: 2px;
  max-height: 220px;
  overflow-y: auto;
}

.sketch-trace-list li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  grid-gap: 8px;
  gap: 8px;
  padding: 3px 4px 3px 8px;
  border-radius: 6px;
  font-size: 13px;
}

.sketch-trace-list li.highlight {
  background: rgba(240, 138, 0, 0.14);
}

.sketch-trace-item-cut {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}

/* Cut away: the parts cut, and the corners being set. */
.sketch-trace-preview path.cut {
  fill: rgba(240, 138, 0, 0.12);
  stroke: #d97a00;
  stroke-width: 1.6;
  stroke-dasharray: 6 4;
  vector-effect: non-scaling-stroke;
}

.sketch-trace-preview path.cut.highlight {
  stroke-width: 3.2;
  fill: rgba(240, 138, 0, 0.24);
}

.sketch-trace-preview path.cut.draft {
  fill: none;
  stroke-dasharray: none;
}

.sketch-trace-preview circle.draft {
  fill: #ffffff;
  stroke: #d97a00;
}

.sketch-trace-preview circle.draft.first {
  fill: #d97a00;
}

/* A region taken into the shape (the magnetic lasso's, as a rule) in blue, dashed like a cut. */
.sketch-trace-preview path.taken {
  fill: rgba(11, 114, 185, 0.1);
  stroke: #0b72b9;
  stroke-width: 1.6;
  stroke-dasharray: 6 4;
  vector-effect: non-scaling-stroke;
}

.sketch-trace-preview path.taken.highlight {
  stroke-width: 3.2;
  fill: rgba(11, 114, 185, 0.22);
}

.sketch-trace-preview path.taken.draft {
  fill: none;
  stroke-dasharray: none;
}

/* The line on to the pointer, as the next click would lay it: lighter than the line laid. */
.sketch-trace-preview path.draft.hover {
  stroke-dasharray: 4 3;
  stroke-opacity: 0.75;
}

.sketch-trace-preview circle.draft.lasso {
  stroke: #0b72b9;
}

.sketch-trace-preview circle.draft.lasso.first {
  fill: #0b72b9;
}

.sketch-trace-item-action {
  max-width: 132px;
  min-height: 26px;
  font-size: 12px;
}

/*!****************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/sketchLock.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************/
/* Locked outlines in a sketch (#653), shown as a locked body in the 3D editor: the same greys
   (.transform-overlay.locked), handles that stay put and do nothing, and a padlock on the selection. */
.sketch-plate {
  --locked-handle-ink: #a59c92;
  --locked-handle-fill: #e4e0da;
}

html[data-theme="dark"] .sketch-plate {
  --locked-handle-ink: #7d7368;
  --locked-handle-fill: #4a4037;
}

/* A locked outline is paler, in any theme, so it reads as fixed. */
.sketch-segments path.locked {
  stroke-opacity: 0.5;
}

/* A locked point is filled grey; hovered or selected, it shows that as any point does. */
.sketch-points circle.locked:not(.selected):not(.active):not(:hover) {
  fill: var(--locked-handle-ink);
}

.sketch-geometry-resize-handle.locked,
.sketch-geometry-resize-handle.locked:hover {
  cursor: not-allowed;
  fill: var(--locked-handle-fill);
  stroke: var(--locked-handle-ink);
}

.sketch-rotate-handle.locked {
  cursor: not-allowed;
  color: var(--locked-handle-ink);
}

.sketch-rotate-handle.locked:hover .rotate-arrow-arc {
  stroke-width: 2.4;
}

/*!*********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/dashboardSelect.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Choosing several designs on the start page to delete them together (#886): the bar that says
 * how many are chosen, and the card that is chosen. The Select button and the dialog are the
 * start page's own buttons and confirm dialog.
 */
.dashboard-select-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 8px 10px;
  color: #6f5840;
  background: #fff4e3;
  border: 1px solid #e3b77c;
  border-radius: 8px;
}

.dashboard-select-bar strong {
  margin-right: auto;
  font-size: 14px;
}

.dashboard-select-bar button {
  height: 34px;
  padding: 0 12px;
  color: #6f5840;
  font: inherit;
  font-size: 14px;
  background: #ffffff;
  border: 1px solid #e3d7c4;
  border-radius: 6px;
  cursor: pointer;
}

.dashboard-select-bar button:hover:not(:disabled) {
  border-color: #c9731d;
}

.dashboard-select-bar button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.dashboard-select-bar button.delete:not(:disabled) {
  color: #ffffff;
  background: #c82031;
  border-color: #c82031;
}

/* The button stays pressed while the selection is on. */
.dashboard-select.active {
  color: #ffffff;
  background: #c9731d;
  border-color: #c9731d;
}

/* A card in the selection: the whole card is the target, and a tick shows what is chosen. */
.project-card.selectable .project-card-open {
  cursor: pointer;
}

.project-card.selected {
  border-color: #c9731d;
  box-shadow: 0 0 0 2px rgba(201, 115, 29, 0.55);
}

.project-card-check {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  color: transparent;
  background: rgba(255, 255, 255, 0.94);
  border: 2px solid #b59c83;
  border-radius: 6px;
  pointer-events: none;
}

.project-card.selected .project-card-check {
  color: #ffffff;
  background: #c9731d;
  border-color: #c9731d;
}

html[data-theme="dark"] .dashboard-select-bar {
  color: #e8dccb;
  background: #3a2c1c;
  border-color: #7a5a30;
}

html[data-theme="dark"] .dashboard-select-bar button {
  color: #e8dccb;
  background: #2a2118;
  border-color: #5a4630;
}

html[data-theme="dark"] .project-card-check {
  background: rgba(42, 33, 24, 0.94);
  border-color: #8b7458;
}