:root{
  --ink:#1a1526;
  --ink-2:#241c38;
  --paper:#f7f0e2;
  --paper-2:#efe6d2;
  --coral:#ff6b4a;
  --violet:#8b6bff;
  --gold:#d4a72c;
  --line:#e4d9c2;
  --line-dark:#3a3050;
  --text:#241c38;
  --text-dim:#6b6280;
  --text-on-ink:#f2ecdd;
  /* coral that reads as text and as a focus ring on cream (4.7:1+); plain coral is for fills */
  --coral-text:#b9361a;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#1a1526;
    --paper-2:#221b33;
    --line:#3a3050;
    --text:#f2ecdd;
    --text-dim:#a79fc0;
    --coral-text:#ff6b4a;
  }
}
:root[data-theme="dark"]{
  --paper:#1a1526;
  --paper-2:#221b33;
  --line:#3a3050;
  --text:#f2ecdd;
  --text-dim:#a79fc0;
  --coral-text:#ff6b4a;
}

*{box-sizing:border-box;}
body{
  background:var(--paper);
  color:var(--text);
  font-family:"Sora", ui-sans-serif, system-ui, sans-serif;
  margin:0;
  padding-inline:0;
}
.app{
  display:flex;
  flex-direction:column;
  min-height:100%;
}
header{
  padding:20px 24px 14px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:baseline;
  gap:14px;
  flex-wrap:wrap;
}
h1{
  font-family:"Fraunces", Georgia, serif;
  font-optical-sizing:auto;
  font-weight:600;
  font-size:1.6rem;
  margin:0;
  letter-spacing:-0.01em;
}
header .sub{
  color:var(--text-dim);
  font-size:0.85rem;
}
main{
  display:flex;
  gap:0;
  flex:1;
  min-height:0;
}
@media (max-width: 860px){
  main{ flex-direction:column; }
}
/* The wrapper has no box on phone and landscape (the .stage strip rules apply as before). */
.stage-pin{ display:contents; }
.toggle-all{
  position:absolute;
  right:8px;
  bottom:8px;
  z-index:1;
  width:44px; height:44px; min-height:44px;
  padding:0;
  display:inline-flex; align-items:center; justify-content:center;
}
.toggle-all svg path{ display:none; }
.toggle-all[data-state="all"] .top-up, .toggle-all[data-state="all"] .bot-up,
.toggle-all[data-state="none"] .top-down, .toggle-all[data-state="none"] .bot-down,
.toggle-all[data-state="some"] .top-up, .toggle-all[data-state="some"] .bot-down{ display:inline; }

.stage{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px 16px;
  background:
    radial-gradient(circle at center, transparent 0%, transparent 55%, var(--paper-2) 100%);
  position:relative;
  min-height:min(72vh, 640px);
}
.canvas-wrap{
  position:relative;
  width:min(560px, 100%);
  aspect-ratio:1/1;
  border-radius:50%;
  box-shadow:0 0 0 1px var(--line), 0 24px 60px -20px rgba(0,0,0,0.35);
  background:var(--paper);
  overflow:hidden;
  transform:scale(1);
}
/* Desktop: the controls panel is taller than the viewport, so pin the canvas
   to the top of the stage and keep it in view while the controls scroll. */
@media (min-width: 861px){
  .stage{ align-items:flex-start; }
  .stage-pin{ display:block; position:sticky; top:28px; width:min(560px, 100%); }
  .canvas-wrap{ width:100%; }
}
canvas{
  width:100%;
  height:100%;
  display:block;
}

.panel{
  width:340px;
  flex-shrink:0;
  padding:20px 22px 32px;
  border-left:1px solid var(--line);
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:22px;
}
@media (max-width: 860px){
  .panel{
    width:100%;
    border-left:none;
    border-top:1px solid var(--line);
  }
}

/* Phone: the mandala stays pinned above the controls (about a third of the screen). */
@media (max-width: 860px){
  :root{ --strip-canvas:clamp(160px, 33vh, 300px); --strip-h:calc(var(--strip-canvas) + 65px); }
  html{ scroll-padding-top:calc(var(--strip-h) + 8px); }
  header .sub{ display:none; }
  header{ padding:12px 16px 8px; }
  .stage{
    flex-direction:column;
    gap:8px;
    position:sticky;
    top:0;
    z-index:5;
    flex:none;
    min-height:0;
    padding:8px 16px;
    background:var(--paper);
    border-bottom:1px solid var(--line);
  }
  .canvas-wrap{ width:var(--strip-canvas); box-shadow:0 0 0 1px var(--line); }
}
/* Phone, typing: while a panel text field has focus the strip shrinks to a small live preview.
   On :root so --strip-h and scroll-padding-top follow. Fixed px: vh is tiny with the keyboard up. */
@media (max-width: 860px){
  :root:has(.panel :is(input[type="text"], textarea):focus){ --strip-canvas:120px; }
}
/* Phone: the strip grows back 300 ms after a text field loses focus. Without the wait, a tap on the button under
   the field misses it: WebKit hit-tests the mouseup after the strip has grown and the button has moved down.
   (Same rule as card/card.css.) */
@media (max-width: 860px){
  .canvas-wrap{ transition:width 0s linear 300ms; }
  :root:has(.panel :is(input[type="text"], textarea):focus) .canvas-wrap{ transition-delay:0s; }
}
/* Landscape phone: mandala on the left for the full height, controls scroll on the right. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1000px) and (min-aspect-ratio: 3/2){
  :root{ --strip-canvas:calc(80vh - 48px); }
  html{ scroll-padding-top:0; }
  header{ padding:6px 16px; }
  h1{ font-size:1.2rem; }
  main{ flex-direction:row; }
  .stage{
    position:sticky;
    top:0;
    z-index:5;
    flex:none;
    align-self:flex-start;
    align-items:center;
    justify-content:center;
    height:100vh;
    width:calc(var(--strip-canvas) + 32px);
    min-height:0;
    padding:8px 16px;
    background:var(--paper);
    border-bottom:none;
    border-right:1px solid var(--line);
  }
  .stage-pin{ display:contents; }
  .canvas-wrap{ position:relative; top:auto; width:var(--strip-canvas); box-shadow:0 0 0 1px var(--line); }
  .panel{ width:auto; flex:1; min-width:0; border-top:none; border-left:none; }
  .zoom-field{ display:none; }
}

.section-head{ margin:0; }
.section-toggle{
  all:unset;
  box-sizing:border-box;
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:44px;
  cursor:pointer;
  font-size:0.72rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--text);
  border-bottom:1px solid var(--line);
}
.section-toggle:focus-visible{ outline:2px solid var(--coral-text); outline-offset:2px; }
.chev{
  width:8px; height:8px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  margin-right:4px;
}
.section-toggle[aria-expanded="true"] .chev{ transform:rotate(-135deg); }
.section-body{
  display:flex;
  flex-direction:column;
  gap:22px;
  padding-top:16px;
}
.section{ margin:0; }
.field{
  display:flex;
  flex-direction:column;
  gap:8px;
}
@media (max-width: 860px){
  .zoom-field{ display:none; }
}
.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;
}
h2.group-label, h3.group-label{ margin:0; }
.field label, .group-label{
  font-size:0.72rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--text-dim);
  display:flex;
  justify-content:space-between;
  align-items:baseline;
}
.field label span.val{
  font-family:"JetBrains Mono", ui-monospace, monospace;
  color:var(--coral-text);
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
}
input[type="range"]{
  width:100%;
  accent-color:var(--coral);
  height:20px;
}

.emoji-grid{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:6px;
}
.emoji-chip{
  font:inherit;
  font-size:1.15rem;
  line-height:1;
  color:inherit;
  padding:6px 0;
  min-height:24px;
  text-align:center;
  border-radius:10px;
  border:1px solid transparent;
  background:var(--paper-2);
  cursor:pointer;
  user-select:none;
  transition:transform 0.08s ease, border-color 0.08s ease;
}
.emoji-chip:hover{ transform:translateY(-1px); }
.emoji-chip.active{
  border-color:var(--coral);
  background:color-mix(in srgb, var(--coral) 16%, var(--paper-2));
}
.emoji-chip:focus-visible{ outline:2px solid var(--coral-text); outline-offset:2px; }

.palette-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  min-height:34px;
}
.palette-chip{
  touch-action:pan-y;
  user-select:none;
  -webkit-user-select:none;
  cursor:grab;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font:inherit;
  font-size:1rem;
  line-height:1;
  color:inherit;
  min-width:36px;
  min-height:32px;
  padding:4px 10px;
  border-radius:999px;
  background:var(--paper-2);
  border:2px solid var(--line);
}
.palette-chip[aria-pressed="true"]{
  border-color:var(--coral-text);
  background:color-mix(in srgb, var(--coral) 22%, var(--paper-2));
}
.palette-chip.unused{ opacity:0.4; }
.palette-chip.dragging{
  position:relative;
  z-index:2;
  cursor:grabbing;
  box-shadow:0 4px 12px rgba(0,0,0,0.18);
}
.palette-chip.drop-target{ outline:2px dashed var(--coral); outline-offset:2px; }
.palette-chip:focus-visible{ outline:2px solid var(--coral-text); outline-offset:2px; }
.palette-toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  margin-top:8px;
}
.palette-toolbar-label{ font-size:0.85rem; margin-right:2px; }
.palette-toolbar .btn{ min-height:32px; }
.palette-toolbar .btn[aria-disabled="true"]{ opacity:0.5; cursor:default; }
.palette-toolbar .btn:focus-visible{ outline:2px solid var(--coral-text); outline-offset:2px; }
.palette-cue{ margin:6px 0 0; }
.palette-actions{ display:flex; align-items:center; gap:8px; margin-top:6px; }
.palette-actions .hint{ margin:0; }
.palette-actions .btn{ min-height:44px; }

.saved-head{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.saved-note{ margin:0; font-size:0.8rem; color:var(--text-dim); }
.saved-note .saved-undo{ margin-left:4px; }
.saved-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.saved-list:empty{ display:none; }
.saved-row{ display:flex; align-items:center; gap:6px; min-width:0; }
.saved-load, .saved-input{
  flex:1;
  min-width:0;
  min-height:36px;
  box-sizing:border-box;
  border-radius:8px;
  border:1px solid var(--line);
  background:var(--paper-2);
  color:var(--text);
  font-family:inherit;
  font-size:0.9rem;
}
.saved-load{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 10px;
  text-align:left;
  cursor:pointer;
}
.saved-load:hover{ border-color:var(--coral); }
.saved-input{ padding:6px 10px; }
.saved-name{ flex:none; max-width:60%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.saved-preview{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; opacity:0.7; }
.saved-load:focus-visible, .saved-input:focus-visible,
.saved-row .btn:focus-visible, .saved-head .btn:focus-visible, .saved-undo:focus-visible{ outline:2px solid var(--coral-text); outline-offset:2px; }
.saved-row .btn{ flex:none; min-height:36px; }

.custom-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.custom-row input[type="text"], .custom-row input[type="search"]{
  flex:1 1 9em;
  min-width:0;
  font-size:1rem;
  padding:8px 10px;
  border-radius:8px;
  border:1px solid var(--line);
  background:var(--paper-2);
  color:var(--text);
  font-family:inherit;
}
/* Phone width: a text field and its buttons share one row only when there is room for 280px of field. Otherwise
   the field takes the full row and the buttons wrap under it (emoji field + Browse; rename + Rename, ✕). Placed after
   the rules above so the flex-basis wins. */
@media (max-width: 860px){
  .custom-row input[type="text"], .custom-row input[type="search"], .saved-row:has(.saved-input) .saved-input{ flex-basis:100%; }
  .saved-row:has(.saved-input){ flex-wrap:wrap; }
}
/* Search or describe results (js/paletteSearch.js); the pool rules repeat /card's (card/card.css). */
.search-results{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin-top:8px; }
.search-results .pool, .search-results .hint{ align-self:stretch; margin:0; }
.pool{ display:flex; flex-direction:column; gap:14px; }
.pool-group{ display:flex; flex-direction:column; gap:6px; }
.pool-word{ margin:0; font-size:0.8rem; font-weight:600; color:var(--text-dim); }
.search-picks{ display:flex; flex-wrap:wrap; gap:6px 12px; margin:0; font-size:1.3rem; }
.search-pick small{ font-size:0.75rem; color:var(--text-dim); }
.search-actions{ display:flex; flex-wrap:wrap; gap:8px; }
.link-btn{ font:inherit; color:var(--coral-text); background:none; border:0; padding:0 4px; text-decoration:underline; cursor:pointer; }
.link-btn:focus-visible{ outline:2px solid var(--coral-text); outline-offset:2px; }
@media (pointer: coarse){ .link-btn{ min-height:44px; padding:0 8px; } }
.btn{
  font-family:"Sora", sans-serif;
  font-size:0.82rem;
  font-weight:600;
  border-radius:8px;
  border:1px solid var(--line);
  background:var(--paper-2);
  color:var(--text);
  padding:9px 14px;
  cursor:pointer;
  letter-spacing:0.01em;
}
.btn:hover{ border-color:var(--coral); }
.btn.primary{
  background:var(--coral);
  border-color:var(--coral);
  color:var(--ink);
}
.btn.primary:hover{ background:color-mix(in srgb, var(--coral) 88%, black); }
.btn.ghost{ background:transparent; }
.btn.full{ width:100%; }

.row{ display:flex; gap:10px; }
.row > *{ flex:1; }

select{
  width:100%;
  font-family:inherit;
  font-size:0.9rem;
  padding:8px 10px;
  border-radius:8px;
  border:1px solid var(--line);
  background:var(--paper-2);
  color:var(--text);
}

.toggle-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:0.85rem;
}
.toggle-row label{
  text-transform:none;
  letter-spacing:0;
  font-size:0.85rem;
  color:var(--text);
  font-weight:500;
}
.switch{
  display:inline-block;
  position:relative;
  width:36px;
  height:20px;
  flex-shrink:0;
}
.switch input{
  opacity:0; width:0; height:0;
}
.slider-pill{
  position:absolute; inset:0;
  background:var(--line);
  border-radius:999px;
  transition:0.15s;
  cursor:pointer;
}
.slider-pill::before{
  content:"";
  position:absolute;
  height:14px; width:14px;
  left:3px; top:3px;
  background:var(--paper);
  border-radius:50%;
  transition:0.15s;
}
.switch input:checked + .slider-pill{ background:var(--coral); }
.switch input:checked + .slider-pill::before{ transform:translateX(16px); }
.switch input:focus-visible + .slider-pill{ outline:2px solid var(--coral-text); outline-offset:2px; }

.footer-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-top:8px;
  border-top:1px solid var(--line);
}
.hint{
  font-size:0.72rem;
  color:var(--text-dim);
  line-height:1.5;
  margin:0;
}
.hint b{ color:var(--text); font-weight:600; }
.btn.small{ padding:5px 10px; font-size:0.74rem; }

.export{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px;
  border:1px solid var(--coral);
  border-radius:12px;
  background:var(--paper-2);
}
.export-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:0.85rem;
}
.export img{
  width:100%;
  height:auto;
  border-radius:50%;
  display:block;
  -webkit-touch-callout:default;
  user-select:auto;
}

#emojiDialog{
  padding:0;
  border:1px solid var(--line);
  border-radius:14px;
  width:min(360px, 92vw);
  background:var(--paper);
  color:var(--text);
}
#emojiDialog::backdrop{
  background:rgba(0,0,0,0.4);
}
.emoji-dialog-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  font-size:0.85rem;
}
.emoji-added{
  min-height:1.9em; /* reserved so the picker doesn't jump when a note appears */
  padding:6px 14px;
  font-size:0.8rem;
  color:var(--text);
  background:color-mix(in srgb, var(--coral) 12%, var(--paper));
  border-bottom:1px solid var(--line);
}
.emoji-added:empty{ background:transparent; border-bottom-color:transparent; }
emoji-picker{
  width:100%;
  height:420px;
  --background: var(--paper);
  --border-color: var(--line);
  --indicator-color: var(--coral);
  --outline-color: var(--coral);
  --input-border-color: var(--line);
  --input-font-color: var(--text);
}

.bg-presets{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  min-height:36px;
}
.bg-preset{
  position:relative; /* anchors the .bg-remove overlay to its swatch */
  width:36px;
  height:36px;
  border-radius:8px;
  border:2px solid var(--line); /* keeps pale swatches (light cream) visible on the panel */
  cursor:pointer;
  transition:border-color 0.1s ease;
  background-size:cover;
  background-position:center;
  flex-shrink:0;
}
.bg-select{
  all:unset;
  position:absolute;
  inset:0;
  border-radius:6px;
  cursor:pointer;
}
.bg-select:focus-visible{ outline:2px solid var(--coral-text); outline-offset:2px; }
.bg-note{ margin:6px 0 0; font-size:0.8rem; color:var(--text-dim); }
.bg-preset:hover{ border-color:var(--coral); }
.bg-preset.active{ border-color:var(--coral-text); box-shadow:0 0 0 3px rgba(255,107,74,0.2); }
.bg-preset[data-type="system"]{
  background:linear-gradient(135deg, #f7f0e2 50%, #1a1526 50%);
  position:relative;
}
.bg-remove{
  all:unset;
  position:absolute;
  top:-6px;
  right:-6px;
  width:18px;
  height:18px;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0.6rem;
  color:white;
  background:rgba(0,0,0,0.75);
  border:1px solid white;
  border-radius:50%;
  cursor:pointer;
  opacity:0;
  transition:opacity 0.1s;
}
.bg-preset:hover .bg-remove,
.bg-preset:focus-within .bg-remove,
.bg-remove:focus-visible{ opacity:1; }
.bg-remove:focus-visible{ outline:2px solid var(--coral-text); outline-offset:1px; }
@media (hover:none){ .bg-remove{ opacity:1; } } /* no hover on touch: always show the badge */

.bg-custom{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--line);
}
.bg-custom .group-label{ margin:0; }
.bg-custom-preview{
  height:28px;
  border-radius:8px;
  border:1px solid var(--line);
}
.custom-bg-row{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.custom-bg-row label{
  font-size:0.72rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--text-dim);
  display:flex;
  justify-content:space-between;
  align-items:baseline;
}
.custom-bg-row input[type="color"]{
  width:100%;
  height:40px;
  border:1px solid var(--line);
  border-radius:8px;
  cursor:pointer;
}
.custom-bg-row input[type="file"]{
  font-size:0.85rem;
}
.shape-strip{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
/* Phone: 9 shapes in 3 equal columns (3 x 3, as on desktop) so no shape sits alone on the last row. Below 756px
   four tiles per row would leave one alone; from 756px the nine tiles fit one row (9 x 72 + 8 x 8 = 712px). */
@media (max-width: 755px){
  .shape-strip{ display:grid; grid-template-columns:repeat(3, 72px); justify-content:space-between; }
}
.shape-tile{
  width:72px;
  height:72px;
  padding:0;
  border-radius:50%;
  border:2px solid var(--line);
  background:var(--paper-2);
  overflow:hidden;
  cursor:pointer;
}
.shape-tile canvas{ width:100%; height:100%; display:block; }
.shape-tile[aria-pressed="true"]{ border-color:var(--coral-text); }
.shape-tile:focus-visible{ outline:2px solid var(--coral-text); outline-offset:2px; }
.shape-controls{
  display:flex;
  flex-direction:column;
  gap:22px;
}

/* Card section */
.field textarea{
  width:100%;
  box-sizing:border-box;
  resize:vertical;
  min-height:4.2em;
  font-family:inherit;
  font-size:1rem;
  line-height:1.4;
  padding:8px 10px;
  border-radius:8px;
  border:1px solid var(--line);
  background:var(--paper-2);
  color:var(--text);
}
.layout-group{ display:flex; flex-wrap:wrap; gap:8px; }
.layout-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  min-width:96px;
  min-height:44px;
  padding:8px 12px;
  border-width:2px;
}
.layout-btn[aria-pressed="true"]{ border-color:var(--coral-text); }
.layout-btn:focus-visible{ outline:2px solid var(--coral-text); outline-offset:2px; }

/* Touch: every control at least 44px in its smaller dimension. */
@media (pointer: coarse){
  /* iOS zooms the page on focus when a text field is under 16px. */
  input[type="text"], input[type="search"], textarea, select,
  .feedback-dialog .fb-field input[type="text"], .feedback-dialog .fb-field textarea{ font-size:max(16px, 1rem); }
  .btn, .btn.small{ min-height:44px; }
  .saved-load, .saved-input, .saved-row .btn{ min-height:44px; }
  select, .custom-row input[type="text"], .custom-row input[type="search"]{ min-height:44px; }
  .custom-bg-row input[type="color"]{ height:44px; }
  .custom-bg-row input[type="file"]{ min-height:44px; }
  .emoji-chip{ min-height:44px; }
  .palette-chip{ min-height:44px; min-width:44px; }
  .palette-toolbar .btn{ min-height:44px; }
  .bg-preset{ width:48px; height:48px; } /* 44px inside the border */
  /* 24px badge poking 10px out of the corner, so 26px of the swatch stays clear; the gap keeps it off the next swatch */
  .bg-presets{ gap:12px; }
  .bg-remove{ width:24px; height:24px; top:-10px; right:-10px; }
  .toggle-row{ min-height:44px; }
  .switch{ width:52px; height:44px; }
  .slider-pill{ inset:12px 8px; }
  .switch input{ position:absolute; inset:0; width:100%; height:100%; opacity:0; margin:0; }
  .switch input:checked + .slider-pill::before{ transform:translateX(16px); }
  input[type="range"]{
    -webkit-appearance:none; appearance:none;
    height:44px; background:transparent; margin:0; touch-action:pan-y;
  }
  input[type="range"]::-webkit-slider-runnable-track{ height:6px; border-radius:3px; background:var(--line); }
  input[type="range"]::-moz-range-track{ height:6px; border-radius:3px; background:var(--line); }
  input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none; appearance:none;
    width:28px; height:28px; border-radius:50%; background:var(--coral);
    border:2px solid var(--paper); margin-top:-11px;
  }
  input[type="range"]::-moz-range-thumb{
    width:24px; height:24px; border-radius:50%; background:var(--coral); border:2px solid var(--paper);
  }
}

/* Windows high contrast / forced colors: backgrounds are dropped, so mark
   states with borders, outlines and system colours instead. */
@media (forced-colors: active){
  .slider-pill{ forced-color-adjust:none; background:Canvas; border:2px solid ButtonText; }
  .slider-pill::before{ background:ButtonText; top:1px; left:2px; }
  .switch input:checked + .slider-pill{ background:Highlight; border-color:Highlight; }
  .switch input:checked + .slider-pill::before{ background:HighlightText; }
  .shape-tile[aria-pressed="true"]{ border-color:Highlight; border-width:4px; }
  .bg-preset, .bg-custom-preview{ forced-color-adjust:none; border-color:ButtonText; }
  .bg-preset.active{ outline:3px solid Highlight; outline-offset:1px; }
  .emoji-chip.active{ border:2px solid Highlight; }
  .palette-chip{ border-color:ButtonText; }
  .palette-chip[aria-pressed="true"]{ border-color:Highlight; border-width:4px; }
  .palette-toolbar .btn[aria-disabled="true"]{ opacity:1; color:GrayText; border-color:GrayText; }
  input[type="range"]::-webkit-slider-runnable-track{ forced-color-adjust:none; background:ButtonText; }
  input[type="range"]::-moz-range-track{ forced-color-adjust:none; background:ButtonText; }
  input[type="range"]::-webkit-slider-thumb{ forced-color-adjust:none; background:Canvas; border-color:ButtonText; }
  input[type="range"]::-moz-range-thumb{ forced-color-adjust:none; background:Canvas; border-color:ButtonText; }
  .section-toggle{ border-bottom-color:ButtonText; }
  .layout-btn[aria-pressed="true"]{ border-color:Highlight; border-width:4px; }
}

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

/* Feedback (ROADMAP 4b) */
.feedback-btn{
  margin-left:auto; align-self:center;
  display:inline-flex; align-items:center; gap:6px;
  min-height:44px; min-width:44px;
}
@media (max-width: 480px){
  header{ gap:8px; }
  header h1{ font-size:1.4rem; }
  /* Keep the header on one line: Feedback is icon-only (the label stays for screen readers). */
  .feedback-btn .fb-label{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
}
.feedback-dialog{
  padding:16px 18px; border:1px solid var(--line); border-radius:14px;
  width:min(480px, 92vw); max-height:90vh; overflow:auto;
  background:var(--paper); color:var(--text);
}
.feedback-dialog::backdrop{ background:rgba(0,0,0,0.4); }
.feedback-dialog h2{ font-family:"Fraunces", Georgia, serif; font-size:1.2rem; margin:0 0 8px; }
.feedback-dialog form{ display:flex; flex-direction:column; gap:12px; }
.fb-kinds{ border:1px solid var(--line); border-radius:10px; padding:6px 10px 8px; margin:0; }
.fb-kinds legend{ font-size:0.82rem; font-weight:600; padding:0 4px; }
.fb-kinds label, .fb-check{ display:flex; align-items:center; gap:8px; min-height:44px; font-size:0.85rem; }
.fb-kinds input, .fb-check input{ width:20px; height:20px; margin:0; flex:none; accent-color:var(--coral); }
.fb-field{ display:flex; flex-direction:column; gap:4px; }
.fb-field > label{ font-size:0.82rem; font-weight:600; }
.fb-field input[type="text"], .fb-field textarea{
  font:inherit; font-size:0.9rem; color:var(--text); background:var(--paper-2);
  border:1px solid var(--line); border-radius:8px; padding:10px; min-height:44px;
}
.fb-field input[type="file"]{ min-height:44px; padding-block:12px; font-size:0.85rem; }
.fb-field textarea{ resize:vertical; }
.fb-error{ color:var(--coral-text); font-size:0.78rem; margin:0; }
.fb-error:empty{ display:none; }
.fb-thumbs:empty{ display:none; }
.fb-thumbs{ list-style:none; margin:0; padding:0; display:flex; gap:10px; flex-wrap:wrap; }
.fb-thumbs li{ display:flex; flex-direction:column; gap:4px; align-items:flex-start; }
.fb-thumbs img{ width:96px; height:96px; object-fit:cover; border-radius:8px; border:1px solid var(--line); }
.fb-thumbs .btn{ min-height:44px; }
.fb-more summary{ cursor:pointer; min-height:44px; line-height:44px; font-size:0.85rem; }
.fb-more pre{ white-space:pre-wrap; font-family:"JetBrains Mono", monospace; font-size:0.75rem; margin:4px 0 0; color:var(--text-dim); }
.fb-hp{ position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.fb-failure{ border:1px solid var(--coral-text); border-radius:10px; padding:10px 12px; font-size:0.85rem; }
.fb-failure p{ margin:0 0 6px; }
.fb-failure a, .fb-done a{ color:var(--coral-text); font-weight:600; display:inline-flex; align-items:center; min-height:44px; }
.fb-actions{ display:flex; justify-content:flex-end; gap:10px; }
.fb-actions .btn{ min-height:44px; }
.fb-done-title{ font-size:1rem; font-weight:600; margin:8px 0; }
.feedback-dialog :focus-visible{ outline:2px solid var(--coral-text); outline-offset:2px; }
@media (forced-colors: active){
  .fb-failure{ border-color:CanvasText; }
  .fb-error{ color:CanvasText; }
}
.site-footer{ text-align:center; padding:20px 16px 28px; border-top:1px solid var(--line); }
.site-footer p{ margin:0; font-size:0.72rem; color:var(--text-dim); }

/* Print files panel (lane M3a) */
.print-panel{ margin-top:12px; border:1px solid var(--line); border-radius:10px; padding:0 12px; }
.print-panel summary{ cursor:pointer; min-height:44px; line-height:44px; font-weight:600; }
.print-panel[open]{ padding-bottom:12px; }
.print-formats{ border:0; margin:0 0 10px; padding:0; display:flex; flex-wrap:wrap; gap:4px 16px; }
.print-formats legend{ font-size:0.85rem; color:var(--text-dim); margin-bottom:4px; padding:0; }
.print-formats label{ display:inline-flex; align-items:center; gap:6px; min-height:44px; }
.print-preview{ display:block; height:300px; max-width:100%; width:auto; object-fit:contain; margin:0 auto 10px; border-radius:4px; }
.print-panel .btn{ min-height:44px; width:100%; }

/* Print backs and insides (lane M3b) */
.print-field{ display:flex; flex-direction:column; gap:4px; margin:0 0 10px; }
.print-field > label{ display:flex; align-items:center; min-height:44px; font-size:0.85rem; color:var(--text-dim); }
.print-field textarea{
  box-sizing:border-box; width:100%; font:inherit; font-size:1rem; color:var(--text);
  background:var(--paper-2); border:1px solid var(--line); border-radius:8px; padding:10px; resize:vertical;
}
/* Tone radios (/card About, Playground describe): pill tiles in the size-opt style. The radio is visually hidden but
   stays focusable. Sentence case: .field label would otherwise uppercase these. */
.tone-field{ border:0; margin:0 0 10px; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.tone-field legend{ font-size:0.85rem; color:var(--text-dim); margin-bottom:4px; padding:0; width:100%; }
.tone-field label{
  position:relative; display:inline-flex; font-size:0.95rem; font-weight:600;
  text-transform:none; letter-spacing:0; color:var(--text);
}
.tone-field input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.tone-opt{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; min-height:44px; padding:0 16px; border-radius:22px; box-sizing:border-box;
  border:2px solid var(--line); background:var(--paper-2);
}
.tone-field input:checked + .tone-opt{
  border-color:var(--coral-text);
  background:color-mix(in srgb, var(--coral) 22%, var(--paper-2));
}
.tone-field input:focus-visible + .tone-opt{ outline:2px solid var(--coral-text); outline-offset:2px; }
.tone-confirm{ border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin:0 0 10px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.tone-confirm p{ flex-basis:100%; margin:0; font-size:0.9rem; }
.tone-confirm .btn{ min-height:44px; }
.tone-confirm[hidden]{ display:none; }
@media (forced-colors: active){
  .tone-opt{ border-color:ButtonText; }
  .tone-field input:checked + .tone-opt{ border-color:Highlight; border-width:4px; }
}
.print-formats[hidden], .print-formats label[hidden], .print-field[hidden]{ display:none; }
.print-panel .btn + .btn{ margin-top:8px; }

/* Lane M4c: per-emoji size (toolbar radios, chip badge). */
.palette-chip{ position:relative; }
.size-badge{
  position:absolute; right:-4px; bottom:-4px;
  min-width:16px; height:16px; padding:0 3px; border-radius:8px;
  font:600 0.65rem/16px Sora, sans-serif; text-align:center;
  background:var(--coral-text); color:var(--paper);
}
.palette-size{ display:inline-flex; align-items:center; gap:4px; margin-left:4px; }
.palette-size label{ position:relative; display:inline-flex; }
.palette-size input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.size-opt{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:32px; min-height:32px; border-radius:8px;
  border:2px solid var(--line); font-size:0.85rem; font-weight:600;
}
.palette-size input:checked + .size-opt{
  border-color:var(--coral-text);
  background:color-mix(in srgb, var(--coral) 22%, var(--paper-2));
}
.palette-size input:focus-visible + .size-opt{ outline:2px solid var(--coral-text); outline-offset:2px; }
@media (pointer: coarse){
  .size-opt{ min-width:44px; min-height:44px; }
}

/* Credits page (lane P7): credits/index.html; footer link on index.html and card/index.html */
.site-footer a{ color:var(--coral-text); font-weight:600; display:inline-flex; align-items:center; min-height:44px; }
.credits-main{ max-width:720px; width:100%; margin:0 auto; padding:24px 16px 32px; display:flex; flex-direction:column; gap:16px; }
.credits-group{ margin:20px 0 0; font-family:"Fraunces", Georgia, serif; font-weight:600; font-size:1.1rem; color:var(--text-dim); }
.credit{ border:1px solid var(--line); border-radius:12px; padding:14px 16px; background:var(--paper-2); }
.credit h2{ margin:0 0 8px; font-family:"Fraunces", Georgia, serif; font-weight:600; font-size:1.15rem; }
.credit dl{ display:grid; grid-template-columns:max-content minmax(0, 1fr); gap:6px 14px; margin:0; font-size:0.88rem; }
.credit dt{ font-weight:600; color:var(--text-dim); }
.credit dd{ margin:0; overflow-wrap:anywhere; }
.credit a{ color:var(--coral-text); }
.credit code{ font-family:"JetBrains Mono", ui-monospace, monospace; font-size:0.85em; }
.credit-note{ margin:10px 0 0; font-size:0.8rem; color:var(--text-dim); }
@media (max-width:480px){
  .credit dl{ grid-template-columns:minmax(0, 1fr); gap:2px; }
  .credit dt{ margin-top:8px; }
  .credit dt:first-child{ margin-top:0; }
}

/* Waitlist page (lane W1) */
.waitlist form{ display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.waitlist input[type="email"]{ min-height:44px; padding:0 12px; font:inherit; border:1px solid var(--line); border-radius:10px; background:var(--paper); color:inherit; }
.wl-field{ font-weight:600; }
.wl-check{ display:flex; gap:10px; align-items:flex-start; min-height:44px; align-items:center; }
.wl-check input{ width:20px; height:20px; flex:none; }
.wl-opts{ border:0; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.wl-opts legend{ padding:0; font-weight:600; color:var(--text-dim); }
.wl-trap{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.wl-error{ margin:0; color:var(--coral-text); font-weight:600; }
.waitlist #waitlistThanks:focus{ outline:none; }

.custom-emoji-chip{ font-size:0; }
.custom-emoji-chip .chip-art{ width:1.5rem; height:1.5rem; display:block; margin:auto; }
.custom-emoji-chip .size-badge{ font-size:0.7rem; }

/* Shapes | Draw (D5): the switch above the stage canvas, and the Draw canvas that takes the mandala's place. */
.mode-switch{ display:flex; justify-content:center; gap:6px; margin-bottom:12px; }
@media (max-width: 860px){ .mode-switch{ margin-bottom:0; } }
.mode-switch .btn{ min-width:84px; min-height:40px; justify-content:center; }
.mode-switch .btn[aria-pressed="true"]{ border-color:var(--coral-text); background:color-mix(in srgb, var(--coral) 22%, var(--paper-2)); }
.canvas-wrap.draw-wrap{ border-radius:12px; }
.draw-wrap canvas{ position:absolute; inset:0; }
#dr-canvas{ touch-action:none; cursor:crosshair; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
#dr-canvas:focus-visible{ outline:3px solid var(--coral-text); outline-offset:-3px; }
#dr-guide{ pointer-events:none; }
.section-static{ cursor:default; }
#section-draw .layout-group .btn[aria-checked="true"]{ border-color:var(--coral-text); background:color-mix(in srgb, var(--coral) 22%, var(--paper-2)); }
#section-draw input[type="color"]{ width:56px; height:36px; padding:2px; border-radius:8px; border:2px solid var(--line); background:var(--paper-2); }
/* Phone, Draw mode: the drawing is the main thing, so it takes the full width (up to 480 px) and scrolls with the page
   instead of being a small pinned strip; the controls follow it. Portrait phones only; landscape keeps its side strip. */
@media (max-width: 860px) and (orientation: portrait){
  :root:has(#playDraw:not([hidden])){ --strip-h:0px; }
  /* Relative, not static: .toggle-all is absolute and needs this box as its containing block, or it floats over the page.
     The bottom padding is the row the button sits in, clear of the drawing. */
  .stage:has(#playDraw:not([hidden])){ position:relative; padding-bottom:60px; }
  .stage:has(#playDraw:not([hidden])) .canvas-wrap.draw-wrap{ width:min(100%, 480px); transition:none; }
}
.print-panel[inert]{ opacity:0.5; }
@media (forced-colors: active){ .mode-switch .btn[aria-pressed="true"]{ border-color:Highlight; border-width:4px; } }

/* /card Look step: border presets as radio tiles (js/cardFlow/look.js). The radio is visually hidden but focusable. */
.border-list{ display:flex; flex-wrap:wrap; gap:8px; }
.border-tile{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  min-width:84px; min-height:44px;
  padding:8px 10px;
  border:2px solid var(--line, currentColor);
  border-radius:12px;
  background:var(--paper-2);
  color:var(--text);
  cursor:pointer;
  font-size:.85rem;
}
.border-tile input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.border-tile:has(input:checked){ border-color:var(--coral-text); }
.border-tile:has(input:focus-visible){ outline:2px solid var(--coral-text); outline-offset:2px; }
.border-tile svg{ display:block; }
@media (forced-colors: active){
  .border-tile:has(input:checked){ border-color:Highlight; border-width:4px; }
}
.border-swatch{ display:block; width:32px; height:32px; border-radius:50%; border:1.5px solid color-mix(in srgb, var(--text) 50%, transparent); }

/* Site menu (lane N2): a disclosure button with a right-aligned panel under it. */
.site-nav{ position:relative; margin-left:auto; align-self:center; }
.feedback-btn + .site-nav{ margin-left:0; }
.site-nav-btn{ display:inline-flex; align-items:center; gap:6px; min-height:44px; min-width:44px; }
.site-nav-panel{
  position:absolute; top:calc(100% + 6px); right:0; z-index:50;
  width:max-content; min-width:200px; max-width:min(300px, calc(100vw - 32px));
  background:var(--paper); color:var(--text); border:1px solid var(--line); border-radius:10px;
  box-shadow:0 12px 32px -8px rgba(0,0,0,0.3); padding:6px;
}
.site-nav-panel[hidden]{ display:none; }
.site-nav-panel ul{ list-style:none; margin:0; padding:0; }
.site-nav-panel a{
  display:flex; align-items:center; gap:8px; min-height:44px; padding:0 12px; border-radius:8px;
  color:inherit; text-decoration:none; font-size:0.9rem;
}
.site-nav-panel li.nested a{ padding-left:28px; font-size:0.84rem; color:var(--text-dim); }
.site-nav-panel a:hover{ background:color-mix(in srgb, var(--coral) 12%, transparent); }
.site-nav-panel a[aria-current="page"]{ font-weight:700; box-shadow:inset 3px 0 0 var(--coral); }
.site-nav-panel a:focus-visible, .site-nav-btn:focus-visible, .brand-link:focus-visible{ outline:2px solid var(--coral-text); outline-offset:2px; }
.site-nav-badge{
  font-size:0.62rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  border:1px solid var(--coral-text); color:var(--coral-text); border-radius:999px; padding:1px 6px;
}
/* Site name: a link home, no underline, inherits the heading look. */
h1 .brand-link, a.brand-link{ color:inherit; text-decoration:none; }
a.brand-link.wordmark{ font-family:"Fraunces", Georgia, serif; font-weight:600; font-size:0.85rem; color:var(--text-dim); display:inline-flex; align-items:center; min-height:44px; }
@media (max-width: 480px){
  a.brand-link.wordmark{ font-size:0.78rem; }
  .site-nav-btn span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
}