:root {
      --bg: #f6f1ea;
      --paper: #fffaf3;
      --card: #ffffff;
      --ink: #1f1b18;
      --muted: #6f655c;
      --line: rgba(31, 27, 24, .12);
      --brand: #151515;
      --accent: #b9824a;
      --shadow: 0 22px 70px rgba(30, 24, 18, .12);
      --radius-lg: 28px;
      --radius-md: 18px;
      --max: 1180px;
      --control-h: 32px;
      --control-pad-x: 12px;
      --control-radius: 10px;
      --side-card-pad: 10px 12px;
      --side-gap: 12px;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      color: var(--ink);
      background:
        radial-gradient(circle at top left, rgba(185, 130, 74, .16), transparent 34rem),
        radial-gradient(circle at 90% 16%, rgba(49, 91, 122, .12), transparent 30rem),
        var(--bg);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
      line-height: 1.75;
    }

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

    .container {
      width: min(var(--max), calc(100% - 40px));
      margin: 0 auto;
    }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 20;
      backdrop-filter: blur(18px);
      background: rgba(246, 241, 234, .78);
      border-bottom: 1px solid var(--line);
    }

    .nav {
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
    }

    .brand {
      font-weight: 900;
      letter-spacing: .08em;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
    }

    .back-link {
      font-size: .92rem;
      color: var(--muted);
    }

    .back-link:hover { color: var(--ink); }

    main { padding: 32px 0 64px; }

    .page-head {
      display: flex;
      align-items: baseline;
      justify-content: flex-start;
      gap: 12px 24px;
      flex-wrap: wrap;
      margin-bottom: 28px;
    }

    .page-head h1 {
      margin: 0;
      font-size: clamp(1.6rem, 3vw, 2.2rem);
      line-height: 1.25;
    }

    .page-head p {
      margin: 0;
      color: var(--muted);
      font-size: clamp(.92rem, 1.6vw, 1.05rem);
      white-space: nowrap;
    }

    .panel {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow);
      padding: 24px;
    }

    .panel.controls {
      border-radius: var(--control-radius);
    }

    .section-label {
      font-size: .85rem;
      font-weight: 700;
      letter-spacing: .06em;
      color: var(--muted);
      margin-bottom: 10px;
    }

    .controls {
      margin-bottom: 18px;
      padding: 10px 14px;
    }

    .controls-bar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
    }

    .dropdown {
      position: relative;
    }

    .dropdown-trigger {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: var(--control-h);
      padding: 0 var(--control-pad-x);
      border: 1px solid var(--line);
      border-radius: var(--control-radius);
      background: var(--paper);
      color: var(--ink);
      font: inherit;
      cursor: pointer;
      white-space: nowrap;
    }

    .dropdown-trigger:hover {
      border-color: rgba(31, 27, 24, .28);
    }

    .dropdown-label {
      font-size: .82rem;
      font-weight: 700;
      color: var(--muted);
    }

    .dropdown-value {
      font-weight: 700;
    }

    .dropdown-caret {
      font-size: .75rem;
      color: var(--muted);
    }

    .dropdown-menu {
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      min-width: 100%;
      padding: 6px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--card);
      box-shadow: var(--shadow);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-4px);
      transition: opacity .15s, transform .15s, visibility .15s;
      z-index: 30;
    }

    .dropdown:hover:not(.is-dismissed) .dropdown-menu,
    .dropdown:focus-within:not(.is-dismissed) .dropdown-menu,
    .dropdown.is-open:not(.is-dismissed) .dropdown-menu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    .dropdown-menu button {
      display: block;
      width: 100%;
      padding: 7px 10px;
      border: none;
      border-radius: 8px;
      background: transparent;
      color: var(--ink);
      font: inherit;
      text-align: left;
      cursor: pointer;
      white-space: nowrap;
    }

    .dropdown-menu button:hover {
      background: var(--paper);
    }

    .dropdown-menu button.is-active {
      background: var(--brand);
      color: #fff;
    }

    .upload-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: var(--control-h);
      padding: 0 var(--control-pad-x);
      border: none;
      border-radius: var(--control-radius);
      background: var(--accent);
      color: #fff;
      font: inherit;
      font-weight: 700;
      cursor: pointer;
      white-space: nowrap;
    }

    .upload-btn:hover { filter: brightness(1.05); }

    .upload-btn:disabled {
      opacity: .5;
      cursor: not-allowed;
    }

    .save-actions {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      width: 100%;
      padding: 14px 14px 18px;
    }

    .save-actions-primary {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      width: 100%;
      max-width: 340px;
      margin: 0 auto;
    }

    .save-action-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      padding: 0 16px;
      border-radius: 12px;
      font: inherit;
      font-size: 0.95rem;
      font-weight: 600;
      letter-spacing: 0.02em;
      cursor: pointer;
      transition: background .15s ease, border-color .15s ease, transform .12s ease;
      -webkit-user-select: none;
      user-select: none;
      -webkit-touch-callout: none;
      touch-action: manipulation;
    }

    .save-action-btn:active {
      transform: scale(0.98);
    }

    .save-action-btn-ghost {
      background: var(--card);
      color: var(--ink);
      border: 1px solid var(--line);
    }

    .save-action-btn-ghost:hover {
      background: var(--paper);
      border-color: rgba(31, 27, 24, .2);
    }

    .save-action-btn-solid {
      background: var(--brand);
      color: #fff;
      border: 1px solid var(--brand);
    }

    .save-action-btn-solid:hover {
      filter: brightness(1.06);
    }

    .save-action-btn:disabled {
      opacity: .55;
      cursor: not-allowed;
      transform: none;
    }

    .save-status {
      margin: 10px 0 0;
      font-size: 0.88rem;
      color: var(--muted);
      text-align: center;
    }

    .save-status.is-error {
      color: #b42318;
    }

    .save-status.is-success {
      color: #067647;
    }

    .save-next {
      width: 100%;
      max-width: 340px;
      margin: 18px auto 0;
      padding: 16px 14px 14px;
      background:
        linear-gradient(180deg, rgba(255, 250, 243, .98) 0%, rgba(255, 255, 255, .92) 100%);
      border: 1px solid rgba(185, 130, 74, .2);
      border-radius: 16px;
      box-shadow: 0 10px 28px rgba(31, 27, 24, .07);
    }

    .save-next-heading {
      margin: 0 0 14px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      text-align: center;
      color: var(--accent);
    }

    .save-code-chip {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 12px 14px;
      margin: 0 0 12px;
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 12px;
      cursor: pointer;
      transition: border-color .15s ease, box-shadow .15s ease;
      -webkit-user-select: none;
      user-select: none;
      -webkit-touch-callout: none;
      touch-action: manipulation;
    }

    .save-code-chip:hover {
      border-color: rgba(185, 130, 74, .35);
      box-shadow: 0 4px 14px rgba(185, 130, 74, .1);
    }

    .save-code-meta {
      flex: 1;
      min-width: 0;
      text-align: left;
    }

    .save-code-label {
      display: block;
      margin-bottom: 2px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.04em;
      color: var(--muted);
    }

    .save-code-value {
      display: block;
      font-size: 1.35rem;
      font-weight: 800;
      letter-spacing: 0.2em;
      font-variant-numeric: tabular-nums;
      color: var(--ink);
    }

    .save-code-copy {
      flex-shrink: 0;
      padding: 6px 12px;
      border-radius: 999px;
      background: rgba(185, 130, 74, .12);
      color: var(--accent);
      font-size: 0.82rem;
      font-weight: 700;
    }

    .save-next-links {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .save-next-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      padding: 0 12px;
      border-radius: 11px;
      border: 1px solid var(--line);
      background: var(--card);
      color: var(--ink);
      font-size: 0.88rem;
      font-weight: 600;
      text-decoration: none;
      transition: background .15s ease, border-color .15s ease, transform .12s ease;
      -webkit-user-select: none;
      user-select: none;
      -webkit-touch-callout: none;
      touch-action: manipulation;
    }

    .save-next-link:active {
      transform: scale(0.98);
    }

    .save-next-link-line {
      color: #047857;
      border-color: rgba(4, 120, 87, .22);
      background: rgba(236, 253, 245, .7);
    }

    .save-next-link-line:hover {
      background: rgba(236, 253, 245, 1);
      border-color: rgba(4, 120, 87, .32);
    }

    .save-next-link-primary {
      background: var(--brand);
      color: #fff;
      border-color: var(--brand);
    }

    .save-next-link-primary:hover {
      filter: brightness(1.06);
    }

    .save-next-notes {
      margin: 12px 0 0;
      text-align: center;
    }

    .save-next-notes p {
      margin: 0 0 6px;
      font-size: 0.78rem;
      line-height: 1.55;
      color: var(--muted);
    }

    .save-next-notes p:last-child {
      margin-bottom: 0;
    }

    .save-next-notes-link {
      color: inherit;
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 2px;
    }

    .text-add-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: var(--control-h);
      padding: 0 var(--control-pad-x);
      border: 1px solid var(--line);
      border-radius: var(--control-radius);
      background: var(--paper);
      color: var(--ink);
      font: inherit;
      font-weight: 700;
      cursor: pointer;
      white-space: nowrap;
    }

    .text-add-btn:hover {
      border-color: rgba(31, 27, 24, .28);
      background: var(--card);
    }

    .text-field {
      display: grid;
      grid-template-columns: var(--side-label-col, 2.5em) minmax(0, 1fr);
      align-items: center;
      gap: 6px 10px;
      margin-bottom: 8px;
    }

    .text-field:last-child { margin-bottom: 0; }

    .text-field label {
      font-size: .82rem;
      font-weight: 700;
      color: var(--muted);
      white-space: nowrap;
    }

    .text-field input[type="text"],
    .text-field textarea,
    .text-field select {
      width: 100%;
      padding: 5px 10px;
      border: 1px solid var(--line);
      border-radius: var(--control-radius);
      background: var(--card);
      color: var(--ink);
      font: inherit;
    }

    .text-field textarea {
      min-height: 0;
      resize: vertical;
      line-height: 1.4;
      field-sizing: content;
    }

    .text-field input[type="color"] {
      width: 100%;
      height: 28px;
      padding: 2px 4px;
      border: 1px solid var(--line);
      border-radius: var(--control-radius);
      background: var(--card);
      cursor: pointer;
    }

    .text-orient-color-row {
      display: flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
      --orient-control-h: 28px;
    }

    .text-orient-btn {
      flex-shrink: 0;
      height: var(--orient-control-h);
      box-sizing: border-box;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--line);
      background: var(--card);
      color: var(--ink);
      border-radius: 8px;
      padding: 0 8px;
      font: inherit;
      font-size: .84rem;
      font-weight: 700;
      cursor: pointer;
      white-space: nowrap;
    }

    .text-orient-btn:hover {
      border-color: rgba(31, 27, 24, .28);
      background: var(--paper);
    }

    .text-orient-color-row input[type="color"] {
      flex: 1;
      min-width: 0;
      width: auto;
      height: var(--orient-control-h);
      box-sizing: border-box;
      padding: 2px 4px;
    }

    .text-field input[type="range"] {
      width: 100%;
      accent-color: var(--accent);
    }

    .font-dropdown {
      width: 100%;
    }

    .font-dropdown-trigger {
      width: 100%;
      justify-content: space-between;
    }

    .font-dropdown-menu {
      --font-menu-item-height: calc(22px + 1.35 * 1.08rem);
      max-height: calc(var(--font-menu-item-height) * 8);
      min-height: calc(var(--font-menu-item-height) * 8);
      overflow-y: auto;
      min-width: 100%;
    }

    .font-dropdown-menu button {
      font-size: 1.02rem;
      line-height: 1.3;
      padding-top: 8px;
      padding-bottom: 8px;
    }

    .font-dropdown-trigger .dropdown-value {
      font-size: .98rem;
      line-height: 1.25;
    }

    .text-size-row {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .text-size-row output {
      min-width: 3.2em;
      font-size: .88rem;
      font-weight: 700;
      color: var(--muted);
      text-align: right;
    }

    .preview-stage {
      min-width: 0;
      overflow: visible;
    }

    .editor-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 330px;
      gap: 20px;
      align-items: start;
    }

    @media (min-width: 901px) {
      .editor-layout {
        align-items: end;
      }
    }

    .preview-wrap {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      background: #fff;
      border-radius: var(--radius-md);
      padding: 12px 12px 0;
      overflow: visible;
      --preview-viewport-h: calc(100svh - 200px);
      --preview-fill-ratio: 0.9;
    }

    .preview-inner {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: visible;
      width: 100%;
      max-width: 100%;
      margin: 0 auto;
      line-height: 0;
      vertical-align: top;
      box-sizing: border-box;
      height: var(--preview-viewport-h);
      min-height: 0;
      padding: 0;
      transform-origin: center center;
    }

    .preview-wrap.is-preview-browse .preview-inner {
      touch-action: none;
      cursor: zoom-in;
    }

    .preview-wrap.is-preview-browse .preview-inner.is-preview-panning {
      cursor: grab;
    }

    .preview-zoom-hint {
      margin: 0;
      padding: 8px 14px 10px;
      text-align: center;
      font-size: .82rem;
      font-weight: 700;
      color: var(--muted);
      line-height: 1.4;
    }

    .preview-zoom-hint.hidden {
      display: none;
    }

    #preview-canvas {
      display: block;
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: calc(var(--preview-fill-ratio) * 100%);
      touch-action: auto;
      cursor: default;
    }

    #preview-canvas.is-scaling,
    #preview-inner.is-scaling {
      cursor: grab;
    }

    #preview-canvas.is-scaling.is-dragging,
    #preview-inner.is-scaling.is-dragging,
    #preview-inner.is-scaling #preview-canvas.is-dragging {
      cursor: grabbing;
    }

    #preview-canvas.is-rotating,
    #preview-inner.is-rotating {
      cursor: alias;
    }

    #preview-canvas.is-rotating.is-dragging,
    #preview-inner.is-rotating.is-dragging,
    #preview-inner.is-rotating #preview-canvas.is-dragging {
      cursor: alias;
    }

    .edit-toolbar {
      position: relative;
      z-index: 6;
      display: flex;
      align-items: flex-end;
      gap: 1px;
      padding: 5px 8px 4px;
      margin-top: 6px;
      margin-bottom: 12px;
      border-radius: 10px;
      background: rgba(21, 21, 21, .88);
      box-shadow: 0 8px 24px rgba(21, 21, 21, .22);
      pointer-events: auto;
      flex-shrink: 0;
    }

    .tool-btn.tool-desktop-only { display: inline-flex; }

    .tool-btn.tool-mobile-only { display: none; }

    .tool-toast,
    .rotate-deg-label {
      padding: 16px 28px;
      border-radius: 999px;
      background: rgba(21, 21, 21, .92);
      color: #fff;
      font-weight: 700;
      font-size: 1.22rem;
      letter-spacing: .04em;
      box-shadow: 0 10px 32px rgba(21, 21, 21, .28);
      pointer-events: none;
    }

    .tool-toast {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 5;
      opacity: 0;
      transform: translate(-50%, calc(-50% + 10px));
      transition: opacity .18s, transform .18s;
      white-space: nowrap;
    }

    .tool-toast.is-visible {
      opacity: 1;
      transform: translate(-50%, -50%);
    }

    .dialog-overlay {
      position: fixed;
      inset: 0;
      z-index: 50;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: rgba(31, 27, 24, .42);
      backdrop-filter: blur(6px);
    }

    .dialog-card {
      width: min(360px, 100%);
      padding: 24px;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      background: var(--card);
      box-shadow: var(--shadow);
      text-align: center;
    }

    .dialog-card p {
      margin: 0 0 20px;
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--ink);
      line-height: 1.6;
    }

    .dialog-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .dialog-btn {
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 12px 10px;
      font: inherit;
      font-weight: 700;
      cursor: pointer;
    }

    .dialog-btn-no {
      background: var(--paper);
      color: var(--ink);
    }

    .dialog-btn-no:hover {
      border-color: rgba(31, 27, 24, .28);
      background: var(--card);
    }

    .dialog-btn-yes {
      background: var(--brand);
      border-color: var(--brand);
      color: #fff;
    }

    .dialog-btn-yes:hover {
      background: #2a2a2a;
      border-color: #2a2a2a;
    }

    .tool-btn {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      min-width: 36px;
      height: auto;
      padding: 4px 4px 3px;
      border: none;
      border-radius: 6px;
      background: transparent;
      color: #fff;
      cursor: pointer;
      flex-shrink: 0;
      -webkit-user-select: none;
      user-select: none;
      -webkit-touch-callout: none;
      touch-action: manipulation;
    }

    .tool-btn:hover {
      background: rgba(255, 255, 255, .12);
    }

    .tool-btn.is-active {
      background: var(--accent);
    }

    .tool-btn:disabled {
      opacity: .35;
      cursor: not-allowed;
    }

    .tool-label {
      font-size: 9px;
      line-height: 1;
      font-weight: 600;
      letter-spacing: .04em;
      opacity: .9;
      white-space: nowrap;
    }

    .tool-layer-hint {
      font-size: 8px;
      line-height: 1;
      font-weight: 600;
      letter-spacing: .02em;
      opacity: .72;
      white-space: nowrap;
    }

    .tool-btn svg {
      display: block;
      width: 15px;
      height: 15px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .tool-divider {
      width: 1px;
      height: 30px;
      background: rgba(255, 255, 255, .18);
      margin: 0 2px;
      align-self: center;
    }

    .tool-order-wrap {
      position: relative;
      display: inline-flex;
    }

    .tool-order-menu {
      position: absolute;
      bottom: calc(100% + 8px);
      left: 50%;
      z-index: 12;
      min-width: 132px;
      padding: 6px;
      border-radius: 10px;
      background: rgba(21, 21, 21, .96);
      box-shadow: 0 8px 24px rgba(21, 21, 21, .35);
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .tool-order-menu button {
      border: none;
      border-radius: 6px;
      padding: 8px 12px;
      background: transparent;
      color: #fff;
      font: inherit;
      font-size: 12px;
      font-weight: 600;
      text-align: left;
      cursor: pointer;
      white-space: nowrap;
    }

    .tool-order-menu button:hover {
      background: rgba(255, 255, 255, .12);
    }

    .tool-order-menu button.is-current {
      background: var(--accent);
    }

    .tool-order-menu button.is-current::after {
      content: " · 目前";
      opacity: .9;
    }

    .selection-ui {
      position: absolute;
      z-index: 4;
      pointer-events: none;
      border: 1px dashed var(--accent);
      transform-origin: center center;
      overflow: visible;
    }

    .resize-handle {
      position: absolute;
      width: 10px;
      height: 10px;
      margin: -5px 0 0 -5px;
      border: 1px solid var(--accent);
      background: #fff;
      border-radius: 1px;
      pointer-events: auto;
      display: none;
    }

    .selection-ui.show-handles .resize-handle {
      display: block;
    }

    .resize-handle[data-handle="nw"] { top: 0; left: 0; cursor: nwse-resize; }
    .resize-handle[data-handle="ne"] { top: 0; left: 100%; cursor: nesw-resize; }
    .resize-handle[data-handle="sw"] { top: 100%; left: 0; cursor: nesw-resize; }
    .resize-handle[data-handle="se"] { top: 100%; left: 100%; cursor: nwse-resize; }

    .rotate-deg-label {
      position: absolute;
      top: 12px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 3;
    }

    .side-panel {
      display: grid;
      gap: var(--side-gap);
    }

    .side-card {
      --side-label-col: 2.5em;
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      padding: var(--side-card-pad);
    }

    .side-card h3 {
      margin: 0 0 8px;
      font-size: 1rem;
    }

    .side-card p {
      margin: 0;
      font-size: .92rem;
      color: var(--muted);
    }

    .align-row {
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      gap: 8px 12px;
    }

    .align-group {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .align-group-label {
      flex-shrink: 0;
      width: var(--side-label-col, 2.5em);
      font-size: .82rem;
      font-weight: 700;
      color: var(--muted);
      white-space: nowrap;
    }

    #align-panel .align-row + .align-row {
      margin-top: 8px;
    }

    #align-panel .align-row {
      width: 100%;
    }

    .align-row-split {
      display: flex;
      gap: 8px;
      width: 100%;
    }

    .align-half {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
    }

    #align-panel .align-row-actions {
      flex: 1;
      display: flex;
      gap: 6px;
      min-width: 0;
    }

    #align-panel .align-row-actions .align-btn {
      flex: 1;
      min-width: 0;
      padding-left: 4px;
      padding-right: 4px;
    }

    .align-group-label-wide {
      --side-label-col: 4.5em;
    }

    .align-group-label-tolerance {
      --side-label-col: 3.5em;
      flex-shrink: 0;
    }

    .align-tolerance-input {
      width: 3.4em;
      flex-shrink: 0;
      min-height: var(--control-h);
      padding: 4px 6px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--card);
      font: inherit;
      font-size: .84rem;
      font-weight: 700;
      text-align: center;
      color: var(--ink);
    }

    .align-tolerance-input:focus-visible {
      outline: 2px solid rgba(139, 94, 60, .35);
      outline-offset: 1px;
    }

    #circle-center-full .circle-center-row {
      --side-label-col: 5.5em;
    }

    #align-panel {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .align-panel-section {
      padding: 2px 0;
    }

    .align-panel-section:first-child {
      padding-top: 0;
    }

    .align-panel-section:last-child {
      padding-bottom: 0;
    }

    .align-panel-section.has-divider {
      border-top: 1px solid var(--line);
      margin-top: 8px;
      padding-top: 8px;
    }

    #align-panel .align-segment {
      margin-left: 0;
      flex-shrink: 0;
    }

    #align-panel .align-segment .segment-btn {
      padding: 5px 10px;
      font-size: .82rem;
      white-space: nowrap;
    }

    #align-panel .align-segment .segment-btn.is-active {
      background: var(--accent);
      color: #fff;
    }

    #align-panel .align-segment .segment-btn.is-active:hover {
      filter: brightness(1.05);
    }

    #preview-canvas.is-color-remove,
    #preview-inner.is-color-remove {
      cursor: url("eyedropper-cursor.svg") 3 20, crosshair;
    }

    .align-btn {
      border: 1px solid var(--line);
      background: var(--card);
      color: var(--ink);
      border-radius: 8px;
      min-height: var(--control-h);
      padding: 4px 10px;
      font: inherit;
      font-size: .84rem;
      font-weight: 700;
      cursor: pointer;
      white-space: nowrap;
      -webkit-user-select: none;
      user-select: none;
      -webkit-touch-callout: none;
      touch-action: manipulation;
    }

    .align-btn:hover:not(:disabled) {
      border-color: rgba(31, 27, 24, .28);
      background: var(--paper);
    }

    .align-btn:disabled {
      opacity: .45;
      cursor: not-allowed;
    }

    #align-panel .align-btn.is-active {
      background: var(--accent);
      border-color: var(--accent);
      color: #fff;
    }

    #align-panel .align-btn.is-active:hover:not(:disabled) {
      filter: brightness(1.05);
      background: var(--accent);
      border-color: var(--accent);
    }

    .align-btn.is-active {
      background: var(--brand);
      border-color: var(--brand);
      color: #fff;
    }

    .align-btn.is-active:hover:not(:disabled) {
      background: #2a2a2a;
      border-color: #2a2a2a;
    }

    .preview-option {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 8px 12px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--paper);
      cursor: pointer;
      user-select: none;
    }

    .preview-option-text {
      font-size: .86rem;
      font-weight: 700;
      color: var(--ink);
      line-height: 1.35;
    }

    .preview-option input {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
    }

    .toggle-switch {
      position: relative;
      flex-shrink: 0;
      width: 38px;
      height: 22px;
      border-radius: 999px;
      background: rgba(31, 27, 24, .14);
      transition: background .18s;
    }

    .toggle-switch::after {
      content: "";
      position: absolute;
      top: 2px;
      left: 2px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 2px 8px rgba(31, 27, 24, .18);
      transition: transform .18s;
    }

    .preview-option input:checked + .toggle-switch {
      background: var(--accent);
    }

    .preview-option input:checked + .toggle-switch::after {
      transform: translateX(16px);
    }

    .preview-option input:focus-visible + .toggle-switch {
      outline: 2px solid rgba(185, 130, 74, .45);
      outline-offset: 2px;
    }

    .segment-control {
      display: inline-grid;
      grid-template-columns: 1fr 1fr;
      gap: 3px;
      padding: 3px;
      margin-left: auto;
      border: 1px solid var(--line);
      border-radius: var(--control-radius);
      background: var(--paper);
      min-height: var(--control-h);
      align-content: center;
    }

    .segment-btn {
      border: none;
      border-radius: 7px;
      padding: 5px 8px;
      font: inherit;
      font-weight: 700;
      font-size: .86rem;
      color: var(--muted);
      background: transparent;
      cursor: pointer;
      -webkit-user-select: none;
      user-select: none;
      -webkit-touch-callout: none;
      touch-action: manipulation;
    }

    body.is-nudge-active .selection-ui {
      visibility: hidden;
    }

    .segment-btn.is-active {
      background: var(--brand);
      color: #fff;
    }

    .segment-btn:hover:not(.is-active) {
      background: var(--paper);
    }

    .empty-state {
      text-align: center;
      padding: 72px 24px;
      color: var(--muted);
    }

    .empty-state strong {
      display: block;
      font-size: 1.2rem;
      color: var(--ink);
      margin-bottom: 8px;
    }

    .hidden { display: none !important; }

    .loading {
      text-align: center;
      padding: 48px 24px;
      color: var(--muted);
    }

      @media (max-width: 900px) {
      html {
        height: 100%;
        overflow: hidden;
      }

      body {
        position: fixed;
        inset: 0;
        width: 100%;
        overflow-x: clip;
        overflow-y: auto;
        overscroll-behavior-y: none;
        -webkit-overflow-scrolling: touch;
        touch-action: manipulation;
      }

      main,
      .container,
      #editor,
      .editor-layout,
      .side-panel,
      .preview-stage,
      .preview-wrap,
      .preview-inner,
      .panel {
        overflow: visible;
      }

      .container {
        width: calc(100% - 16px);
      }

      main {
        padding-top: 20px;
        padding-bottom: 32px;
      }

      .page-head {
        margin-bottom: 16px;
        flex-direction: column;
        align-items: flex-start;
      }

      .page-head p {
        margin-left: 0;
        white-space: normal;
      }

      .page-head h1 {
        font-size: 1.45rem;
      }

      .editor-layout {
        grid-template-columns: 1fr;
        gap: 16px;
      }

      .editor-layout > * {
        min-width: 0;
      }

      .align-row {
        flex-wrap: wrap;
        gap: 12px 8px;
      }

      .align-row-split {
        flex-wrap: nowrap;
      }

      #color-remove-row .align-row-actions .align-btn {
        font-size: .78rem;
        padding-left: 2px;
        padding-right: 2px;
      }

      .side-panel {
        position: relative;
        z-index: 10;
      }

      .preview-stage.is-preview-zoomed {
        position: relative;
        z-index: 12;
      }

      .controls {
        margin-bottom: 12px;
        padding: 8px 10px;
      }

      .controls-bar {
        gap: 6px;
      }

      .dropdown-trigger {
        min-height: 30px;
        padding: 0 10px;
      }

      .upload-btn {
        min-height: 30px;
        padding: 0 10px;
      }

      .panel {
        padding: 16px;
      }

      .preview-wrap {
        padding: 8px 8px 0;
      }

      .preview-inner {
        max-width: 80%;
        height: var(--preview-viewport-h);
        padding: 0;
      }

      .font-dropdown-menu {
        min-height: 0;
        max-height: min(calc(var(--font-menu-item-height) * 8), 50svh);
      }

      .edit-toolbar {
        margin-top: 2px;
        margin-bottom: 4px;
      }

      .tool-btn.tool-desktop-only { display: none; }

      .tool-btn.tool-mobile-only { display: inline-flex; }

      #preview-canvas {
        max-width: 100%;
        max-height: calc(var(--preview-fill-ratio) * 100%);
        touch-action: pan-y;
      }

      #preview-inner.is-editing #preview-canvas,
      #preview-canvas.is-dragging {
        touch-action: none;
      }

      body.is-canvas-dragging {
        overflow: hidden;
      }
    }