/* DrawTool.ai. Plain CSS, no libraries, no outside fonts. */

:root {
  --bg: #f6f7fb;
  --panel: #ffffff;
  --ink: #121633;
  --soft: #4a5070;
  --line: #d5d9ea;
  --blue: #1d4ed8;
  --blue-dark: #1639a8;
  --on-blue: #ffffff;
  --accent: #ffd23f;
  --danger: #b42318;
  --ok: #067647;
  --ring: #1d4ed8;
  --radius: 14px;
  --max: 1100px;
  --gutter: 16px;
  color-scheme: light dark;
}

/* The colours follow the device (light or dark) unless the visitor chose one with the Theme list in
   the header (theme.js sets data-theme="light" or "dark" on the page, and remembers it). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #0e1124;
    --panel: #171b36;
    --ink: #f1f3ff;
    --soft: #b9bfdc;
    --line: #2d3358;
    --blue: #7ea0ff;
    --blue-dark: #a6bcff;
    --on-blue: #0e1124;
    --danger: #ff9a8f;
    --ok: #6ee7a8;
    --ring: #ffd23f;
  }
}
:root[data-theme='light'] {
  color-scheme: light;
}
:root[data-theme='dark'] {
  --bg: #0e1124;
  --panel: #171b36;
  --ink: #f1f3ff;
  --soft: #b9bfdc;
  --line: #2d3358;
  --blue: #7ea0ff;
  --blue-dark: #a6bcff;
  --on-blue: #0e1124;
  --danger: #ff9a8f;
  --ok: #6ee7a8;
  --ring: #ffd23f;
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
}

h1,
h2,
h3,
p,
fieldset {
  margin: 0;
}

a {
  color: var(--blue);
  text-underline-offset: 3px;
}

:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 10;
  padding: 0.6rem 1rem;
  background: var(--accent);
  color: #121633;
  font-weight: 700;
  border-radius: 8px;
}
.skip:focus {
  top: 8px;
}

main:focus {
  outline: none;
}

/* A link that is only seen when it has keyboard focus. It is always there for screen readers. */
.skip-inline {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.skip-inline:focus {
  position: static;
  display: inline-block;
  width: auto;
  height: auto;
  margin: 0 0 1rem;
  padding: 0.6rem 1rem;
  overflow: visible;
  clip: auto;
  background: var(--accent);
  color: #121633;
  font-weight: 700;
  border-radius: 8px;
}

/* ---------- header ---------- */

.hdr {
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.hdr-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0.9rem var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
}
.logo {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-decoration: none;
  color: var(--ink);
}
.logo span {
  color: var(--blue);
}
/* The links and the Install app button (shown only when the browser offers installation). */
.hdr-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.25rem;
}
.hdr nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
}
.hdr nav a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  padding: 0.35rem 0.1rem;
}
.hdr nav a:hover {
  text-decoration: underline;
}

/* On phones the links, Install app and Theme fold into a Menu button (theme.js adds .menu-js; without
   the script everything stays visible). From 700px the menu is always open and the button is gone. */
.menu-btn {
  display: none;
}
.menu-js .menu-btn:not([hidden]) {
  display: inline-flex;
}
.menu-js .hdr-right {
  display: none;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
}
.menu-js .hdr-right.open {
  display: flex;
}
.menu-js .hdr nav {
  flex-direction: column;
}
@media (min-width: 700px) {
  .menu-js .menu-btn:not([hidden]) {
    display: none;
  }
  .menu-js .hdr-right,
  .menu-js .hdr-right.open {
    display: flex;
    width: auto;
    flex-direction: row;
    align-items: center;
  }
  .menu-js .hdr nav {
    flex-direction: row;
  }
}

/* ---------- layout ---------- */

main > section,
main > nav {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.hero {
  padding-top: 2.5rem;
  padding-bottom: 1.5rem;
}
.hero h1 {
  font-size: clamp(2rem, 6vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-weight: 800;
  max-width: 22ch;
}
.lead {
  margin-top: 1rem;
  max-width: 40rem;
  font-size: 1.25rem;
  color: var(--soft);
}

h2 {
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
h3 {
  font-size: 1.15rem;
  margin-top: 1.5rem;
  line-height: 1.3;
}

/* ---------- drawing tool ---------- */

.tool {
  /* room for the pinned action strip on phones */
  padding-bottom: calc(3rem + 5.5rem);
}
.tool h2 {
  margin-bottom: 1rem;
}

.notice {
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  border-left: 6px solid var(--danger);
  background: var(--panel);
  font-weight: 600;
}

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  align-items: flex-start;
  padding: 1rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 1rem;
}

fieldset.group {
  border: 0;
  padding: 0;
  min-width: 0;
}
fieldset.group legend,
.size-group label {
  display: block;
  padding: 0;
  margin-bottom: 0.4rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.chip {
  position: relative;
  display: inline-block;
}
.chip input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.ic {
  flex: none;
  width: 1.3em;
  height: 1.3em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Phone first: the icon goes above the word, so eleven tools take little room. */
.chip span {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  min-width: 4.5rem;
  min-height: 44px;
  padding: 0.45rem 0.5rem;
  border: 2px solid var(--line);
  border-radius: 16px;
  background: var(--bg);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}
.chip input:checked + span {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--on-blue);
}
.chip input:focus-visible + span {
  outline: 3px solid var(--ring);
  outline-offset: 2px;
}

.colour-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
}
.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.swatch {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
}
.swatch[aria-pressed='true'] {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--panel), 0 0 0 6px var(--ink);
}
.custom-colour {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
}
.custom-colour input {
  width: 52px;
  height: 44px;
  padding: 2px;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  cursor: pointer;
}

.size-group {
  width: 100%;
  min-width: 14rem;
}
.size-group input[type='range'] {
  width: 100%;
  min-height: 44px;
  accent-color: var(--blue);
}
.size-group output {
  display: block;
  font-size: 0.95rem;
  color: var(--soft);
}
.brush-preview {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-top: 0.5rem;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
}
.brush-dot {
  display: block;
  border-radius: 50%;
  box-sizing: border-box;
}
.brush-dot.is-eraser {
  border: 2px dashed #6b7280;
}

.check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  font-weight: 600;
  cursor: pointer;
}
.check input {
  width: 1.4rem;
  height: 1.4rem;
  accent-color: var(--blue);
}

/* Phone first: the actions are one strip pinned to the bottom of the screen. It stays in the same place
   in the page, so the reading order and the Tab order do not change. The script hides it while the
   drawing tool is off screen (body.tool-away). */
.actions {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.4rem;
  overflow-x: auto;
  padding: 0.5rem var(--gutter) calc(0.5rem + env(safe-area-inset-bottom, 0px));
  background: var(--panel);
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
}
.tool-away .actions {
  visibility: hidden;
}
.actions .btn {
  flex: none;
  flex-direction: column;
  justify-content: center;
  gap: 0.15rem;
  min-width: 4.75rem;
  padding: 0.35rem 0.5rem;
  font-size: 0.8rem;
  line-height: 1.15;
  text-align: center;
}
.actions .btn .ic {
  width: 1.4em;
  height: 1.4em;
}

/* The row above the controls: the skip link (seen only on focus) and the full screen buttons. */
.tool-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.tool-top .skip-inline:focus {
  margin: 0;
}
/* The "More options" section: closed on phones, open on wider screens (see app.js). */
.more {
  flex: 1 1 100%;
}
.more > summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.6rem 1rem;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.more > summary::-webkit-details-marker {
  display: none;
}
.more > summary::before {
  content: '';
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}
.more[open] > summary::before {
  transform: rotate(45deg);
}
.more > summary:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 2px;
}
.more-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 1rem;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 6rem;
  z-index: 30;
  max-width: calc(100% - 2rem);
  padding: 0.6rem 1rem;
  transform: translateX(-50%);
  border-radius: 10px;
  background: var(--ink);
  color: var(--bg);
  font-weight: 600;
  text-align: center;
}
.toast[hidden] {
  display: none;
}

html {
  scroll-padding-bottom: 6rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.6rem 1.1rem;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.btn:hover {
  border-color: var(--blue);
}
.btn[aria-disabled='true'] {
  opacity: 0.5;
  cursor: default;
}
.btn[aria-disabled='true']:hover {
  border-color: var(--line);
}
.btn-main {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--on-blue);
}
.btn-main:hover {
  background: var(--blue-dark);
  border-color: var(--blue-dark);
}

.canvas-wrap {
  position: relative;
  width: 100%;
  max-width: 1200px;
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  overflow: auto;
}
.canvas-wrap.is-zoomed {
  max-height: 80vh;
}
.stage {
  position: relative;
  width: 100%;
  background-color: #ffffff;
}
.stage.is-transparent {
  background-color: #ffffff;
  background-image: linear-gradient(45deg, #d9dbe3 25%, transparent 25%, transparent 75%, #d9dbe3 75%),
    linear-gradient(45deg, #d9dbe3 25%, transparent 25%, transparent 75%, #d9dbe3 75%);
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
}
.stage canvas,
#canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.stage canvas[hidden] {
  display: none;
}
#canvas {
  cursor: crosshair;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
#canvas[data-tool='pan'] {
  cursor: grab;
}
#canvas[data-tool='text'] {
  cursor: text;
}
#canvas:focus-visible {
  outline: 4px solid var(--ring);
  outline-offset: -4px;
}
#cursor {
  pointer-events: none;
}

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
}
.field-inline {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.field-inline label,
.group > label[for='text-input'] {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--soft);
}
.select,
.text-input {
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
}
.text-input {
  display: block;
  width: min(100%, 22rem);
}
#zoom-label {
  font-weight: 600;
  color: var(--soft);
}

.benefits {
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.benefits li {
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  font-weight: 600;
  font-size: 0.95rem;
}

.shortcuts {
  margin-top: 1rem;
  max-width: 52rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
.shortcuts summary {
  cursor: pointer;
  font-weight: 700;
}
.shortcuts ul {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
}

.hint {
  margin-top: 0.75rem;
  max-width: 52rem;
  font-size: 0.95rem;
  color: var(--soft);
}

/* ---------- waitlist ---------- */

.waitlist {
  padding-top: 2rem;
  padding-bottom: 3rem;
}
.waitlist > *,
.about > * {
  max-width: 44rem;
}
.waitlist h2 {
  margin-bottom: 0.5rem;
}
#waitlist-form {
  margin-top: 1.25rem;
  padding: 1.25rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.field label {
  display: block;
  margin-bottom: 0.4rem;
  font-weight: 700;
}
.field input {
  width: 100%;
  min-height: 48px;
  padding: 0.6rem 0.8rem;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
}
.field input[aria-invalid='true'] {
  border-color: var(--danger);
}
#waitlist-button {
  margin-top: 0.9rem;
}
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.message {
  min-height: 1.5em;
  margin-top: 0.75rem;
  font-weight: 700;
}
.message-error {
  color: var(--danger);
}
.message-ok {
  color: var(--ok);
}

/* ---------- about ---------- */

.about {
  padding-bottom: 4rem;
}
.about h2 {
  margin-bottom: 0.75rem;
}

/* ---------- for sale page ---------- */

.sell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
  padding-top: 3rem;
  padding-bottom: 4rem;
}
@media (min-width: 901px) {
  .sell {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 3rem;
  }
}
.sell h1 {
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  font-weight: 800;
}
.sell-terms {
  display: grid;
  gap: 0.6rem;
  margin: 1.5rem 0 0;
  padding: 1.1rem 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  max-width: 36rem;
}
.sell-terms li {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: 0.75rem;
}
.sell-terms a {
  font-weight: 700;
  overflow-wrap: anywhere;
}
.sell-points {
  display: grid;
  gap: 1.5rem;
  margin: 2rem 0;
  padding: 0;
  list-style: none;
  max-width: 36rem;
}
.sell-points strong,
.sell-points h3 {
  margin-top: 0;
  display: block;
  margin-bottom: 0.2rem;
  font-size: 1.15rem;
}
.textlink {
  font-weight: 700;
}
.faq {
  max-width: 36rem;
}
.faq h2 {
  margin-bottom: 0.5rem;
}
.faq details {
  border-bottom: 1px solid var(--line);
  padding: 0.75rem 0;
}
.faq summary {
  cursor: pointer;
  font-weight: 700;
  min-height: 32px;
}
.faq details p {
  margin-top: 0.5rem;
  color: var(--soft);
}

.offer {
  padding: 1.5rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.offer h2 {
  margin-bottom: 1rem;
}
.offer .field {
  margin-bottom: 1rem;
}
.offer .field select {
  width: 100%;
  min-height: 48px;
  padding: 0.6rem 0.8rem;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
}
.offer .field select[aria-invalid='true'],
.offer .field input[aria-invalid='true'] {
  border-color: var(--danger);
}
.offer .hint {
  display: block;
  margin-top: 0.4rem;
}

/* ---------- footer ---------- */

.foot {
  background: #121633;
  color: #d5daff;
}
.foot-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.75rem var(--gutter);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
}
.foot strong {
  color: #ffffff;
}
.foot a {
  color: #ffd23f;
  font-weight: 700;
}

/* ---------- tablets and up: the pills go back to icon beside word ---------- */

@media (min-width: 701px) {
  .chip span {
    flex-direction: row;
    justify-content: flex-start;
    gap: 0.45rem;
    min-width: 0;
    padding: 0.6rem 0.9rem;
    border-radius: 999px;
    font-size: 1rem;
    text-align: left;
  }
  .size-group {
    width: auto;
  }
  .more-body {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem 1.5rem;
  }
}

/* ---------- wide screens: the controls beside the canvas ----------
   Only the way it is drawn changes. The controls stay before the canvas in the page, so the reading
   order and the Tab order are the same as on a narrow screen. The section is allowed to be wider than
   the rest of the page, so the canvas keeps (nearly) the width it has in one column. */

@media (min-width: 1000px) {
  main > section.tool {
    max-width: 1520px;
  }
  .tool {
    display: grid;
    /* The panel is a little narrower on small laptops and tablets turned sideways. */
    grid-template-columns: clamp(16rem, 24vw, 19rem) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto auto;
    column-gap: 1.5rem;
    align-items: start;
    padding-bottom: 3rem;
  }
  .tool > h2 {
    grid-row: 1;
  }
  .tool > .tool-top,
  .tool > .notice {
    grid-row: 2;
  }
  .tool > .shortcuts {
    grid-row: 5;
  }
  .tool > h2,
  .tool > .tool-top,
  .tool > .notice,
  .tool > .shortcuts {
    grid-column: 1 / -1;
  }
  .tool > .controls {
    grid-column: 1;
    grid-row: 3;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
  }
  /* The long panel scrolls with the page, and the canvas stays in view beside it. */
  .tool > .canvas-wrap {
    grid-column: 2;
    grid-row: 3;
    position: sticky;
    top: 1rem;
  }
  .tool > #canvas-help {
    grid-column: 2;
    grid-row: 4;
  }
  /* Beside the canvas the actions are part of the panel again, two buttons to a row. */
  .tool > .controls .actions {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    overflow: visible;
    padding: 0;
    background: none;
    border-top: 0;
    box-shadow: none;
  }
  .tool-away .tool > .controls .actions {
    visibility: visible;
  }
  .tool > .controls .actions .btn {
    flex-direction: row;
    justify-content: center;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.6rem;
    font-size: 1rem;
    line-height: normal;
  }
  .tool > .controls .actions .btn .ic {
    width: 1.3em;
    height: 1.3em;
  }
  .tool > .controls .more-body {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 1rem;
  }
  .toast {
    bottom: 1.5rem;
  }
  html {
    scroll-padding-bottom: 0;
  }
  .tool > .controls .size-group {
    min-width: 0;
  }
}

/* ---------- small screens, reduced motion, high contrast ---------- */

/* ---------- full screen drawing (see app.js) ----------
   The same controls and canvas are restyled: nothing is copied or moved in the page, so the reading
   order and the Tab order stay the same. The Tools button opens the controls as a sheet over the
   canvas. The action strip stays pinned to the bottom, as on a phone. */

html.fs-open,
html.fs-open body {
  overflow: hidden;
}
main > section.tool.is-fs {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--bg);
}
main > section.tool.is-fs > h2,
main > section.tool.is-fs > #canvas-help {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
main > section.tool.is-fs > .shortcuts,
main > section.tool.is-fs .skip-inline {
  display: none;
}
main > section.tool.is-fs .tool-top {
  margin: 0;
}
main > section.tool.is-fs #fs-exit,
main > section.tool.is-fs #fs-tools {
  position: fixed;
  top: 0.5rem;
  z-index: 120;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
main > section.tool.is-fs #fs-exit {
  left: 0.5rem;
}
main > section.tool.is-fs #fs-tools {
  right: 0.5rem;
}
main > section.tool.is-fs > .canvas-wrap {
  position: static;
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 3.5rem 0.5rem 5.25rem;
  overflow: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
}
main > section.tool.is-fs .stage {
  flex: none;
  margin: auto;
  /* max-width, not width: zooming sets a width on the stage, and the canvas must still fit */
  max-width: calc((100vh - 9rem) * var(--ratio, 1.5));
  max-width: calc((100dvh - 9rem) * var(--ratio, 1.5));
}
main > section.tool.is-fs > .controls {
  position: static;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
main > section.tool.is-fs:not(.tools-open) > .controls > :not(.actions) {
  display: none;
}
main > section.tool.is-fs.tools-open > .controls {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 5.25rem;
  z-index: 110;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 1rem;
  max-height: calc(100vh - 9rem);
  max-height: calc(100dvh - 9rem);
  overflow-y: auto;
  padding: 1rem var(--gutter);
  border-top: 1px solid var(--line);
  border-radius: 14px 14px 0 0;
  background: var(--panel);
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.25);
}
/* The action strip looks the same in full screen at any width. */
main > section.tool.is-fs > .controls .actions {
  position: fixed;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.4rem;
  overflow-x: auto;
  padding: 0.5rem var(--gutter) calc(0.5rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
  visibility: visible;
}
main > section.tool.is-fs > .controls .actions .btn {
  flex: none;
  flex-direction: column;
  justify-content: center;
  gap: 0.15rem;
  min-width: 4.75rem;
  padding: 0.35rem 0.5rem;
  font-size: 0.8rem;
  line-height: 1.15;
}
main > section.tool.is-fs > .controls .actions .btn .ic {
  width: 1.4em;
  height: 1.4em;
}
/* A phone turned sideways is short: keep the whole canvas on screen, above the action strip. */
@media (orientation: landscape) and (max-height: 520px) {
  .canvas-wrap {
    max-width: min(100%, calc((100vh - 6rem) * var(--ratio, 1.5)));
    margin-inline: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

@media (forced-colors: active) {
  .chip input:checked + span {
    outline: 3px solid Highlight;
  }
  .swatch[aria-pressed='true'] {
    outline: 3px solid Highlight;
  }
}

/* ---------- privacy notice and terms of use ---------- */

.legal {
  padding-top: 2.5rem;
}
.legal h1 {
  margin-bottom: 0.5rem;
}
.legal h2 {
  margin-top: 2rem;
}
.legal ul {
  margin: 0 0 1rem 1.25rem;
  list-style: disc;
}
.legal a {
  text-decoration: underline;
}
.legal-updated {
  color: var(--soft);
}
.legal-sign {
  margin-top: 2.5rem;
}

.btn[hidden] { display: none; }

/* Control group names are plain headings (no fieldset), so a screen reader says each name once. */
.group > h3,
.group-title {
  display: block;
  margin: 0 0 0.4rem;
  padding: 0;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.55;
  color: var(--soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.size-group > h3 label {
  margin: 0;
}

.control-block > .group-title {
  margin: 0 0 0.4rem;
}

/* "Contact" is a heading but keeps the look of the other labels in the list. */
.sell-terms .term-title {
  margin: 0;
  font-size: inherit;
  font-weight: 700;
  letter-spacing: normal;
  line-height: inherit;
}

/* ---------- the Theme list in the header ---------- */
.theme {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.theme-ic {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--soft);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.theme select {
  min-height: 44px;
  padding: 0.3rem 0.6rem;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
}
.theme[hidden] {
  display: none;
}