:root {
      --cream-0: #fffdf8;
      --cream-1: #fff7ed;
      --cream-2: #f4e2c9;
      --cream-3: #e2c49f;
      --ink: #35241d;
      --muted: #7c6657;
      --soft: #ad8a73;
      --caramel: #c96f3d;
      --caramel-dark: #9f4e2a;
      --rose: #b65a68;
      --rose-light: #f1ccd1;
      --sage: #7f9278;
      --sage-light: #dce7d7;
      --paper: rgba(255, 253, 248, 0.9);
      --line: rgba(80, 49, 32, 0.16);
      --shadow-1: 0 10px 24px rgba(96, 61, 35, 0.12);
      --shadow-2: 0 20px 50px rgba(96, 61, 35, 0.22);
      --radius: 8px;
      --ease: cubic-bezier(.2,.8,.2,1);
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      min-height: 100vh;
      background:
        radial-gradient(circle at 14% 8%, rgba(201, 111, 61, 0.12) 0 18%, transparent 19%),
        linear-gradient(135deg, var(--cream-0) 0%, var(--cream-1) 52%, #f7ead6 100%);
      color: var(--ink);
      font-family: "Trebuchet MS", Verdana, sans-serif;
      letter-spacing: 0;
      text-wrap: pretty;
    }
    button, input, textarea, select {
      font: inherit;
    }
    button {
      border: 0;
      cursor: pointer;
      color: inherit;
    }
    .app-shell {
      width: min(1180px, calc(100% - 32px));
      margin: 0 auto;
      padding: 22px 0 56px;
    }
    .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 20px;
    }
    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }
    .cat-mark {
      position: relative;
      width: 42px;
      height: 38px;
      border: 2px solid var(--ink);
      border-radius: 42% 42% 38% 38%;
      background: var(--cream-2);
      box-shadow: inset 0 -8px 0 rgba(201, 111, 61, 0.12);
      flex: 0 0 auto;
    }
    .cat-mark::before,
    .cat-mark::after {
      content: "";
      position: absolute;
      top: -10px;
      width: 16px;
      height: 16px;
      border-top: 2px solid var(--ink);
      border-left: 2px solid var(--ink);
      background: var(--cream-2);
      transform: rotate(45deg);
    }
    .cat-mark::before { left: 3px; }
    .cat-mark::after { right: 3px; }
    .cat-face {
      position: absolute;
      inset: 13px 8px auto;
      height: 10px;
      border-top: 2px dotted var(--ink);
      opacity: .8;
    }
    .brand-text strong {
      display: block;
      font-family: Georgia, "Times New Roman", serif;
      font-size: 20px;
      line-height: 1;
    }
    .brand-text span {
      display: block;
      margin-top: 4px;
      color: var(--muted);
      font-size: 12px;
    }
    .nav-tabs {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 5px;
      background: rgba(255,255,255,.58);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow-1);
    }
    .tab-button {
      min-height: 38px;
      padding: 0 14px;
      border-radius: 6px;
      color: var(--muted);
      background: transparent;
      transition: background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
    }
    .tab-button:hover { color: var(--ink); background: rgba(201, 111, 61, .08); }
    .tab-button.active { background: var(--ink); color: var(--cream-0); }
    .tab-button:active { transform: translateY(1px); }
    .hero {
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(330px, .95fr);
      gap: 24px;
      align-items: stretch;
      margin-bottom: 28px;
    }
    .hero-copy {
      min-height: 390px;
      padding: clamp(28px, 5vw, 54px);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background:
        linear-gradient(115deg, rgba(255,253,248,.94), rgba(255,247,237,.82)),
        repeating-linear-gradient(90deg, rgba(53,36,29,.05) 0 1px, transparent 1px 17px);
      box-shadow: var(--shadow-1);
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      width: fit-content;
      margin-bottom: 20px;
      padding: 7px 10px;
      border-radius: 999px;
      background: var(--sage-light);
      color: #43573e;
      font-size: 13px;
      font-weight: 700;
    }
    .paw-dot {
      width: 13px;
      height: 13px;
      border-radius: 50%;
      background:
        radial-gradient(circle at 50% 74%, var(--sage) 0 34%, transparent 35%),
        radial-gradient(circle at 20% 22%, var(--sage) 0 18%, transparent 19%),
        radial-gradient(circle at 50% 10%, var(--sage) 0 18%, transparent 19%),
        radial-gradient(circle at 80% 22%, var(--sage) 0 18%, transparent 19%);
    }
    h1 {
      margin: 0;
      max-width: 790px;
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(44px, 7vw, 86px);
      line-height: .92;
      font-weight: 700;
      letter-spacing: 0;
    }
    .hero-copy p {
      max-width: 650px;
      margin: 22px 0 0;
      color: var(--muted);
      font-size: 17px;
      line-height: 1.75;
    }
    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 30px;
    }
    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      min-height: 44px;
      padding: 0 17px;
      border-radius: var(--radius);
      border: 1px solid transparent;
      font-weight: 800;
      transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
      user-select: none;
    }
    .button.primary {
      background: var(--caramel);
      color: #fffaf3;
      box-shadow: 0 10px 22px rgba(201,111,61,.24);
    }
    .button.primary:hover { background: var(--caramel-dark); transform: translateY(-1px); }
    .button.secondary { background: rgba(255,255,255,.64); border-color: var(--line); color: var(--ink); }
    .button.secondary:hover { background: #fff; transform: translateY(-1px); }
    .button.ghost { background: transparent; border-color: var(--line); color: var(--muted); }
    .button.ghost:hover { color: var(--ink); background: rgba(255,255,255,.58); }
    .button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid rgba(182,90,104,.28); outline-offset: 2px; }
    .button:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
    .icon {
      width: 18px;
      height: 18px;
      display: inline-block;
      flex: 0 0 auto;
    }
    .studio-card {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(255,255,255,.55);
      box-shadow: var(--shadow-1);
      padding: 18px;
      min-height: 390px;
      display: grid;
      grid-template-rows: auto 1fr auto;
      gap: 16px;
      overflow: hidden;
    }
    .card-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
    }
    .card-head h2,
    .section-head h2 {
      margin: 0;
      font-family: Georgia, "Times New Roman", serif;
      font-size: 24px;
    }
    .mini-note {
      color: var(--muted);
      font-size: 13px;
    }
    .preview-board {
      position: relative;
      min-height: 245px;
      border: 1px solid rgba(53,36,29,.12);
      border-radius: var(--radius);
      background:
        linear-gradient(45deg, rgba(255,255,255,.55) 25%, transparent 25% 75%, rgba(255,255,255,.55) 75%),
        linear-gradient(45deg, rgba(255,255,255,.55) 25%, transparent 25% 75%, rgba(255,255,255,.55) 75%);
      background-position: 0 0, 10px 10px;
      background-size: 20px 20px;
      overflow: hidden;
      display: grid;
      place-items: center;
    }
    .bead-preview {
      width: min(84%, 310px);
      aspect-ratio: 1;
      display: grid;
      gap: 2px;
      padding: 10px;
      border-radius: 8px;
      background: rgba(255,253,248,.74);
      box-shadow: inset 0 0 0 1px var(--line), 0 16px 34px rgba(53,36,29,.12);
    }
    .bead {
      min-width: 0;
      min-height: 0;
      border-radius: 50%;
      box-shadow: inset -1px -2px 0 rgba(53,36,29,.12), inset 1px 1px 0 rgba(255,255,255,.35);
    }
    .empty-state {
      text-align: center;
      padding: 18px;
      color: var(--muted);
    }
    .empty-state strong {
      display: block;
      color: var(--ink);
      font-family: Georgia, "Times New Roman", serif;
      font-size: 25px;
      margin-bottom: 8px;
    }
    .upload-zone {
      position: relative;
      border: 1px dashed rgba(53,36,29,.3);
      border-radius: var(--radius);
      background: rgba(255,253,248,.72);
      padding: 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
    .upload-zone input {
      position: absolute;
      inset: 0;
      opacity: 0;
      cursor: pointer;
    }
    .upload-copy strong { display: block; font-size: 14px; }
    .upload-copy span { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; }
    .section-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 16px;
      margin: 12px 0 16px;
    }
    .section-head p {
      margin: 7px 0 0;
      color: var(--muted);
      max-width: 610px;
      line-height: 1.6;
    }
    .community-tools {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    .filter-pill {
      min-height: 34px;
      padding: 0 11px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.58);
      color: var(--muted);
      font-size: 13px;
      transition: background .18s var(--ease), color .18s var(--ease);
    }
    .filter-pill.active,
    .filter-pill:hover {
      background: var(--ink);
      color: var(--cream-0);
    }
    .masonry {
      column-count: 4;
      column-gap: 18px;
    }
    .work-card {
      display: inline-block;
      width: 100%;
      margin: 0 0 18px;
      break-inside: avoid;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(255,253,248,.86);
      box-shadow: var(--shadow-1);
      overflow: hidden;
      transition: transform .2s var(--ease), box-shadow .2s var(--ease);
    }
    .work-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-2);
    }
    .thumb {
      display: block;
      width: 100%;
      background: var(--cream-2);
      border-bottom: 1px solid var(--line);
    }
    .work-body { padding: 14px; }
    .work-title-row {
      display: flex;
      align-items: start;
      justify-content: space-between;
      gap: 10px;
    }
    .work-title {
      margin: 0;
      font-family: Georgia, "Times New Roman", serif;
      font-size: 20px;
      line-height: 1.2;
    }
    .like-button {
      min-width: 56px;
      height: 34px;
      border-radius: 999px;
      border: 1px solid rgba(182,90,104,.3);
      background: rgba(241,204,209,.35);
      color: var(--rose);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      transition: transform .16s var(--ease), background .16s var(--ease);
    }
    .like-button:hover { transform: translateY(-1px); background: rgba(241,204,209,.62); }
    .like-button.liked { background: var(--rose); color: white; }
    .like-icon { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; }
    .like-button.liked .like-icon { fill: currentColor; }
    .author {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 10px;
      color: var(--muted);
      font-size: 13px;
    }
    .avatar {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: var(--sage-light);
      color: #41533b;
      display: grid;
      place-items: center;
      font-weight: 800;
      border: 1px solid rgba(65,83,59,.14);
    }
    .tag-list {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 12px;
    }
    .tag {
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      padding: 0 8px;
      border-radius: 999px;
      background: rgba(201,111,61,.11);
      color: var(--caramel-dark);
      font-size: 12px;
      font-weight: 700;
    }
    .description {
      margin: 11px 0 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.55;
    }
    .flow-overlay,
    .share-overlay {
      position: fixed;
      inset: 0;
      z-index: 50;
      display: none;
      background: rgba(53,36,29,.46);
      backdrop-filter: blur(14px);
      padding: 18px;
    }
    .flow-overlay.open,
    .share-overlay.open {
      display: grid;
      place-items: center;
      animation: fadeIn .18s var(--ease);
    }
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    .flow-shell {
      width: min(1180px, 100%);
      height: min(780px, calc(100vh - 36px));
      border: 1px solid rgba(255,253,248,.38);
      border-radius: var(--radius);
      background: var(--cream-0);
      box-shadow: 0 24px 80px rgba(27,18,13,.36);
      display: grid;
      grid-template-rows: auto 1fr auto;
      overflow: hidden;
    }
    .flow-top {
      min-height: 72px;
      padding: 14px 18px;
      border-bottom: 1px solid var(--line);
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 18px;
      align-items: center;
      background: rgba(255,247,237,.72);
    }
    .back-button {
      width: 42px;
      height: 42px;
      border-radius: var(--radius);
      border: 1px solid var(--line);
      background: white;
      display: grid;
      place-items: center;
    }
    .stepper {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
      align-items: center;
    }
    .step {
      position: relative;
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
      padding: 9px 10px;
      border-radius: var(--radius);
      color: var(--muted);
      background: rgba(255,255,255,.55);
      border: 1px solid transparent;
    }
    .step.active {
      color: var(--ink);
      background: white;
      border-color: rgba(201,111,61,.32);
      box-shadow: var(--shadow-1);
    }
    .step.done {
      color: #43573e;
      background: var(--sage-light);
    }
    .step-index {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      background: rgba(53,36,29,.09);
      font-size: 12px;
      font-weight: 900;
    }
    .step-label {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-weight: 800;
      font-size: 13px;
    }
    .flow-body {
      min-height: 0;
      padding: 18px;
      overflow: hidden;
    }
    .flow-panel {
      height: 100%;
      display: none;
      grid-template-columns: minmax(0, 1fr) 330px;
      gap: 18px;
      animation: panelIn .22s var(--ease);
    }
    .flow-panel.active { display: grid; }
    @keyframes panelIn {
      from { opacity: .2; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .workspace {
      min-height: 0;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fffaf3;
      display: grid;
      place-items: center;
      overflow: hidden;
      position: relative;
    }
    .crop-frame {
      position: relative;
      width: min(76vh, 76vw, 560px);
      aspect-ratio: 1;
      border-radius: 8px;
      border: 2px solid rgba(53,36,29,.7);
      background: rgba(255,255,255,.58);
      box-shadow: 0 14px 42px rgba(53,36,29,.14);
      overflow: hidden;
      cursor: grab;
      touch-action: none;
      user-select: none;
    }
    .crop-frame.dragging { cursor: grabbing; }
    .crop-frame img {
      position: absolute;
      left: 50%;
      top: 50%;
      width: var(--crop-w, 100%);
      height: var(--crop-h, 100%);
      object-fit: fill;
      transform: translate(-50%, -50%) translate(var(--crop-x, 0px), var(--crop-y, 0px));
      filter: saturate(1.08) contrast(1.02);
      pointer-events: none;
    }
    .crop-frame::before,
    .crop-frame::after {
      content: "";
      position: absolute;
      inset: 33.33% 0;
      border-top: 1px solid rgba(255,255,255,.8);
      border-bottom: 1px solid rgba(255,255,255,.8);
      pointer-events: none;
    }
    .crop-frame::after {
      inset: 0 33.33%;
      border: 0;
      border-left: 1px solid rgba(255,255,255,.8);
      border-right: 1px solid rgba(255,255,255,.8);
    }
    .side-panel {
      min-width: 0;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(255,253,248,.86);
      padding: 16px;
      overflow: auto;
    }
    .side-panel h3 {
      margin: 0 0 9px;
      font-family: Georgia, "Times New Roman", serif;
      font-size: 24px;
    }
    .side-panel p {
      margin: 0 0 18px;
      color: var(--muted);
      line-height: 1.55;
      font-size: 14px;
    }
    .control-group {
      margin-top: 16px;
    }
    .control-group label {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 8px;
      font-size: 13px;
      font-weight: 800;
      color: var(--ink);
    }
    .range {
      width: 100%;
      accent-color: var(--caramel);
    }
    .segmented {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
    }
    .segmented button {
      min-height: 38px;
      border-radius: 7px;
      border: 1px solid var(--line);
      background: white;
      color: var(--muted);
      font-size: 13px;
      font-weight: 800;
    }
    .segmented button.active {
      background: var(--ink);
      color: var(--cream-0);
    }
    .marker-grid-wrap,
    .generated-wrap {
      width: min(72vh, 74vw, 560px);
      aspect-ratio: 1;
      padding: 14px;
      background: white;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow-1);
    }
    .marker-grid,
    .generated-grid {
      width: 100%;
      height: 100%;
      display: grid;
      gap: 1px;
      background: rgba(53,36,29,.2);
      border: 1px solid rgba(53,36,29,.18);
    }
    .pixel-cell {
      appearance: none;
      padding: 0;
      min-width: 0;
      min-height: 0;
      position: relative;
      border: 0;
      border-radius: 0;
    }
    .pixel-cell.protect::after,
    .pixel-cell.protected::after,
    .pixel-cell.clear::after {
      content: "";
      position: absolute;
      inset: 22%;
      border-radius: 50%;
      border: 2px solid rgba(255,255,255,.72);
      box-shadow: 0 0 0 1px rgba(53,36,29,.22);
    }
    .pixel-cell.clear::after {
      border-radius: 3px;
      transform: rotate(45deg);
      background: rgba(255,255,255,.38);
    }
    .palette-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 13px;
    }
    .swatch {
      width: 31px;
      height: 31px;
      border-radius: 50%;
      border: 2px solid white;
      box-shadow: 0 0 0 1px rgba(53,36,29,.18);
    }
    .summary-list {
      display: grid;
      gap: 9px;
      margin-top: 14px;
    }
    .summary-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 10px;
      border-radius: var(--radius);
      background: rgba(244,226,201,.34);
      font-size: 13px;
      color: var(--muted);
    }
    .summary-item strong {
      color: var(--ink);
      font-size: 15px;
    }
    .flow-footer {
      min-height: 72px;
      padding: 14px 18px;
      border-top: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      background: rgba(255,247,237,.72);
    }
    .share-dialog {
      width: min(960px, 100%);
      max-height: calc(100vh - 36px);
      border: 1px solid rgba(255,253,248,.38);
      border-radius: var(--radius);
      background: var(--cream-0);
      box-shadow: 0 24px 80px rgba(27,18,13,.36);
      display: grid;
      grid-template-columns: minmax(0, .92fr) minmax(300px, 1fr);
      overflow: hidden;
    }
    .share-preview {
      padding: 18px;
      background: #fff4e4;
      border-right: 1px solid var(--line);
      display: grid;
      align-content: center;
      gap: 14px;
    }
    .share-preview h3 {
      margin: 0;
      font-family: Georgia, "Times New Roman", serif;
      font-size: 24px;
    }
    .share-preview img {
      width: 100%;
      border-radius: var(--radius);
      border: 1px solid var(--line);
      background: white;
      box-shadow: var(--shadow-1);
    }
    .share-form {
      padding: 20px;
      overflow: auto;
    }
    .dialog-title {
      display: flex;
      align-items: start;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 20px;
    }
    .dialog-title h2 {
      margin: 0;
      font-family: Georgia, "Times New Roman", serif;
      font-size: 32px;
      line-height: 1;
    }
    .close-button {
      width: 38px;
      height: 38px;
      border-radius: var(--radius);
      background: white;
      border: 1px solid var(--line);
    }
    .field {
      display: grid;
      gap: 8px;
      margin-bottom: 16px;
    }
    .field label {
      font-size: 13px;
      font-weight: 900;
      color: var(--ink);
    }
    .field input,
    .field textarea {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: white;
      color: var(--ink);
      padding: 12px;
      min-height: 44px;
    }
    .field textarea {
      min-height: 112px;
      resize: vertical;
      line-height: 1.5;
    }
    .tag-input-wrap {
      min-height: 48px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: white;
      padding: 7px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px;
    }
    .tag-chip {
      min-height: 28px;
      padding: 0 8px;
      border-radius: 999px;
      background: var(--sage-light);
      color: #43573e;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 800;
    }
    .tag-chip button {
      width: 18px;
      height: 18px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: rgba(67,87,62,.12);
      color: #43573e;
    }
    .tag-input-wrap input {
      flex: 1 1 130px;
      min-width: 120px;
      border: 0;
      outline: 0;
      padding: 6px;
      min-height: 30px;
    }
    .toast {
      position: fixed;
      right: 18px;
      bottom: 18px;
      z-index: 80;
      padding: 12px 14px;
      border-radius: var(--radius);
      background: var(--ink);
      color: var(--cream-0);
      box-shadow: var(--shadow-2);
      transform: translateY(18px);
      opacity: 0;
      pointer-events: none;
      transition: opacity .18s var(--ease), transform .18s var(--ease);
      font-size: 14px;
      font-weight: 800;
    }
    .toast.show {
      transform: translateY(0);
      opacity: 1;
    }
    .tweaks {
      position: fixed;
      right: 18px;
      bottom: 18px;
      z-index: 20;
    }
    .tweaks-panel {
      width: 250px;
      display: none;
      margin-bottom: 10px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(255,253,248,.92);
      box-shadow: var(--shadow-2);
      backdrop-filter: blur(12px);
    }
    .tweaks.open .tweaks-panel { display: block; }
    .tweaks-panel h3 { margin: 0 0 12px; font-family: Georgia, "Times New Roman", serif; }
    .tweak-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-top: 10px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 800;
    }
    .switch {
      width: 44px;
      height: 24px;
      border-radius: 999px;
      background: var(--cream-3);
      padding: 3px;
      transition: background .18s var(--ease);
    }
    .switch::before {
      content: "";
      display: block;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: white;
      transition: transform .18s var(--ease);
    }
    body.compact .work-body { padding: 11px; }
    body.compact .tag-list { gap: 4px; }
    body.gridlines .bead,
    body.gridlines .pixel-cell { box-shadow: inset 0 0 0 1px rgba(53,36,29,.15); }
    body.gridlines .switch.grid-switch { background: var(--caramel); }
    body.gridlines .switch.grid-switch::before { transform: translateX(20px); }
    body.compact .switch.compact-switch { background: var(--caramel); }
    body.compact .switch.compact-switch::before { transform: translateX(20px); }
    @media (max-width: 1040px) {
      .hero { grid-template-columns: 1fr; }
      .hero-copy, .studio-card { min-height: auto; }
      .masonry { column-count: 3; }
      .flow-panel { grid-template-columns: 1fr 300px; }
    }
    @media (max-width: 820px) {
      .app-shell { width: min(100% - 22px, 1180px); padding-top: 14px; }
      .topbar { align-items: flex-start; flex-direction: column; }
      .nav-tabs { width: 100%; }
      .tab-button { flex: 1; }
      .hero-copy { padding: 28px 20px; }
      .masonry { column-count: 2; }
      .flow-shell { height: calc(100vh - 24px); }
      .flow-top { grid-template-columns: auto 1fr; }
      .flow-top .mini-note { display: none; }
      .stepper { gap: 5px; }
      .step { padding: 8px 7px; }
      .step-label { display: none; }
      .flow-panel { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
      .side-panel { max-height: 210px; }
      .share-dialog { grid-template-columns: 1fr; overflow: auto; }
      .share-preview { border-right: 0; border-bottom: 1px solid var(--line); }
      .share-preview img { max-height: 260px; object-fit: contain; }
    }
    @media (max-width: 560px) {
      .app-shell { width: calc(100% - 16px); }
      h1 { font-size: 42px; }
      .hero-actions, .flow-footer { flex-direction: column; align-items: stretch; }
      .button { width: 100%; }
      .section-head { align-items: flex-start; flex-direction: column; }
      .masonry { column-count: 1; }
      .flow-overlay, .share-overlay { padding: 8px; }
      .flow-shell { height: calc(100vh - 16px); }
      .flow-body { padding: 10px; }
      .flow-top { padding: 10px; }
      .marker-grid-wrap, .generated-wrap, .crop-frame { width: min(86vw, 440px); }
      .tweaks { right: 10px; bottom: 10px; }
      .tweaks-panel { width: calc(100vw - 20px); }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
      }
    }