:root {
  color-scheme: light;
  --bg: #f7f1e8;
  --paper: #f7f1e8;
  --paper-2: #fffaf1;
  --panel: #fffdf8;
  --panel-2: #fff5de;
  --field: #fffaf1;
  --ink: #151111;
  --text: #201a18;
  --muted: #6f6761;
  --line: #201a18;
  --line-strong: #201a18;
  --green: #179b92;
  --green-dark: #0c655f;
  --teal: #179b92;
  --yellow: #f4c84f;
  --pink: #f0449b;
  --heart-red: #e11d48;
  --coral: #f06a3d;
  --blue: #163f72;
  --light-blue: #238aff;
  --white: #fffdf8;
  --shadow: 8px 8px 0 var(--ink);
}

.edition-factory-shell,
.edition-mint-shell {
  width: min(100%, 1160px);
  margin: 0 auto;
  padding: clamp(14px, 3vw, 32px);
}

.edition-hero-panel {
  max-width: 1120px;
  margin: 0 auto 18px;
  padding: clamp(16px, 3vw, 26px);
}

.edition-hero-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  box-shadow: 7px 7px 0 var(--teal);
}

.edition-wallet-stats {
  width: min(420px, 100%);
}

.wallet-stat-button {
  display: inline;
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  font: inherit;
  font-weight: 950;
  text-align: left;
  cursor: pointer;
}

.wallet-stat-button:hover,
.wallet-stat-button:focus-visible {
  color: var(--pink);
  outline: 0;
}

.edition-factory-workspace-bar {
  margin-bottom: 14px;
}

.wizard-shell.edition-wizard-shell {
  max-width: 1120px;
  margin: 0 auto 18px;
}

.edition-wizard-shell .edition-stepper {
  max-width: none;
  margin: 0;
  padding: 0 0 14px;
}

.edition-builder-panel {
  min-width: 0;
}

.edition-wizard-footer {
  max-width: none;
}

.edition-standard-grid,
.edition-base-grid,
.edition-item-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.choice-section-label {
  margin: 24px 0 8px;
  color: var(--muted);
  font-size: 17px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0;
}

.question-block + .choice-section-label {
  margin-top: 18px;
}

.edition-standard-grid + .edition-import-fields,
.edition-standard-grid + .form-grid,
.edition-import-fields + .form-grid {
  margin-top: 26px;
}

.edition-standard-card strong,
.edition-base-card strong {
  display: block;
  margin-bottom: 6px;
}

.edition-import-fields.active {
  display: block;
}

.edition-csv-drop,
.edition-asset-folder-drop {
  margin-bottom: 14px;
}

.edition-logo-field {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.edition-item-editor,
.edition-phase-editor {
  position: relative;
  display: grid;
  gap: 12px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  padding: 14px;
  background: var(--field);
}

.edition-phase-editor {
  box-shadow: 5px 5px 0 var(--ink);
}

.edition-empty-items {
  grid-column: 1 / -1;
}

.edition-item-editor.is-deleted {
  opacity: 0.85;
}

.edition-deleted-banner {
  margin: -14px -14px 4px;
  padding: 8px 12px;
  border-bottom: 2px solid var(--ink);
  background: var(--pink);
  color: var(--white);
  font-weight: 950;
  text-transform: uppercase;
}

.edition-delete-item {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--pink);
  color: var(--white);
  font-weight: 950;
  cursor: pointer;
}

.edition-item-head,
.edition-phase-title,
.edition-saved-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.edition-phase-title-actions,
.edition-phase-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.edition-phase-title-main {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.edition-phase-drag-handle {
  position: relative;
  align-self: center;
  flex: 0 0 22px;
  width: 22px;
  min-width: 22px;
  height: 32px;
  border: 0;
  border-radius: 6px;
  padding: 0;
  background: transparent;
  cursor: grab;
}

.edition-phase-drag-handle::before,
.edition-phase-drag-handle::after {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  content: "";
}

.edition-phase-drag-handle::before {
  top: 6px;
  left: 4px;
  z-index: 1;
  background: color-mix(in srgb, var(--ink) 14%, var(--paper) 86%);
  border: 1px solid rgba(25, 20, 18, 0.12);
  box-shadow:
    8px 0 0 color-mix(in srgb, var(--ink) 14%, var(--paper) 86%),
    0 10px 0 color-mix(in srgb, var(--ink) 14%, var(--paper) 86%),
    8px 10px 0 color-mix(in srgb, var(--ink) 14%, var(--paper) 86%),
    0 20px 0 color-mix(in srgb, var(--ink) 14%, var(--paper) 86%),
    8px 20px 0 color-mix(in srgb, var(--ink) 14%, var(--paper) 86%);
}

.edition-phase-drag-handle::after {
  top: 7px;
  left: 5px;
  background: var(--ink);
  box-shadow:
    8px 0 0 var(--ink),
    0 10px 0 var(--ink),
    8px 10px 0 var(--ink),
    0 20px 0 var(--ink),
    8px 20px 0 var(--ink);
}

.edition-phase-drag-handle:active {
  cursor: grabbing;
}

.edition-phase-drag-handle:focus-visible {
  outline: 3px solid var(--mint-accent-secondary, var(--yellow));
  outline-offset: 2px;
}

.edition-phase-drag-handle:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.edition-phase-editor.is-dragging {
  opacity: 0.72;
}

.edition-phase-editor.is-dragging::before {
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: -2px;
  width: 4px;
  background: var(--pink);
  content: "";
}

.edition-phase-editor.is-drop-before::after,
.edition-phase-editor.is-drop-after::after {
  position: absolute;
  left: 10px;
  right: 10px;
  z-index: 3;
  height: 4px;
  border-radius: 999px;
  background: var(--pink);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--field) 76%, transparent);
  content: "";
}

.edition-phase-editor.is-drop-before::after {
  top: -13px;
}

.edition-phase-editor.is-drop-after::after {
  bottom: -13px;
}

.edition-phase-toolbar {
  justify-content: flex-end;
}

.edition-phase-toggle {
  min-height: 34px;
  border-width: 2px;
  border-radius: 6px;
  padding: 0 10px;
  font-size: 12px;
}

.edition-phase-body {
  display: grid;
  gap: 12px;
}

.edition-phase-editor.is-collapsed {
  background: var(--paper-2);
}

.edition-item-head strong,
.edition-phase-title strong,
.edition-saved-row strong {
  color: var(--ink);
  font-size: 18px;
  font-weight: 950;
}

.edition-item-head span,
.edition-saved-row span {
  color: var(--muted);
  font-weight: 850;
}

.edition-item-editor p {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.edition-item-meta {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 850;
}

.edition-item-meta span {
  overflow-wrap: anywhere;
}

.edition-item-admin-actions {
  align-items: center;
}

.edition-mint-page-grid {
  display: grid;
  gap: 18px;
}

.edition-mint-config-section {
  display: grid;
  gap: 14px;
  border-top: 2px solid var(--line);
  padding-top: 16px;
}

.edition-mint-config-section:first-child {
  border-top: 0;
  padding-top: 0;
}

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

.edition-section-heading .field-note {
  margin: 4px 0 0;
}

.edition-page-basics-grid,
.edition-media-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.edition-page-basics-grid .draw-skin-field {
  grid-column: span 2;
}

.edition-accent-field {
  min-height: 0;
  align-content: start;
}

.edition-accent-field input[type="color"] {
  margin-top: 0;
}

.mint-page-media-field.edition-logo-media-field,
.mint-page-media-field.edition-banner-media-field {
  display: grid;
  grid-template-rows: auto auto auto auto auto;
  align-content: start;
  gap: 8px;
}

.edition-logo-media-field .secondary-action {
  justify-self: start;
  margin-top: 2px;
  min-height: 44px;
}

.edition-logo-media-field .field-note,
.edition-banner-media-field .field-note {
  min-height: 34px;
}

.edition-banner-media-field .secondary-action {
  justify-self: start;
  margin-top: 2px;
  min-height: 44px;
}

.edition-layout-designer {
  display: grid;
  gap: 14px;
  border-top: 2px solid var(--line);
  margin-top: 6px;
  padding-top: 14px;
}

.edition-layout-designer-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.edition-layout-workbench {
  display: grid;
  grid-template-columns: minmax(136px, 0.26fr) minmax(0, 1fr) minmax(220px, 0.36fr);
  gap: 14px;
  align-items: start;
}

.edition-element-palette,
.edition-layout-inspector,
.edition-layout-canvas {
  min-width: 0;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--field);
}

.edition-element-palette {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.edition-element-palette button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 48px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  padding: 6px 8px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-weight: 950;
  text-align: left;
  cursor: grab;
}

.edition-element-palette button span,
.edition-layout-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
}

.edition-element-palette button strong {
  overflow-wrap: anywhere;
}

.edition-layout-canvas {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: 48px;
  gap: 10px;
  min-height: 420px;
  padding: 12px;
  background:
    linear-gradient(90deg, rgba(21, 17, 17, 0.06) 1px, transparent 1px),
    linear-gradient(180deg, rgba(21, 17, 17, 0.06) 1px, transparent 1px),
    var(--paper-2);
  background-size: 24px 24px, 24px 24px, auto;
  user-select: none;
}

.edition-layout-tile {
  position: relative;
  display: grid;
  grid-column: span 12;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px 10px;
  align-content: start;
  align-items: start;
  height: 100%;
  min-height: 0;
  border: 2px solid var(--ink);
  border-radius: 8px;
  padding: 10px;
  background: var(--layout-bg, var(--field));
  color: var(--layout-color, var(--ink));
  font: inherit;
  text-align: left;
  cursor: move;
  touch-action: none;
  overflow: hidden;
}

.edition-layout-tile[data-width="third"] {
  grid-column: span 4;
}

.edition-layout-tile[data-width="half"] {
  grid-column: span 6;
}

.edition-layout-tile[data-width="two-thirds"] {
  grid-column: span 8;
}

.edition-layout-tile.active {
  box-shadow: 5px 5px 0 var(--pink);
}

.edition-layout-tile.drag-over {
  outline: 3px dashed var(--teal);
  outline-offset: 3px;
}

.edition-layout-tile strong {
  min-width: 0;
  font-size: 18px;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.edition-layout-tile small {
  grid-column: 2;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.edition-layout-grid-chip {
  justify-self: end;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 3px 7px;
  background: var(--paper);
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
}

.edition-layout-resize-handle {
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 18px;
  height: 18px;
  border-right: 4px solid var(--ink);
  border-bottom: 4px solid var(--ink);
  border-radius: 3px;
  cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 45%, var(--pink) 46% 58%, transparent 59%);
  touch-action: none;
}

.edition-layout-inspector {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.edition-layout-inspector label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.edition-layout-inspector input,
.edition-layout-inspector textarea,
.edition-layout-inspector select {
  min-width: 0;
}

.edition-layout-style-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.edition-storage-actions {
  margin: 12px 0;
}

.edition-phase-list,
.edition-saved-list {
  display: grid;
  gap: 12px;
}

.edition-saved-panel {
  margin-top: 12px;
}

.edition-saved-row {
  border: 2px solid var(--ink);
  border-radius: 8px;
  padding: 12px;
  background: var(--field);
}

.edition-launch-result {
  margin-top: 14px;
}

.edition-mint-body {
  --mint-accent: var(--pink);
  --mint-accent-contrast: var(--white);
  --mint-accent-secondary: var(--yellow);
  --mint-accent-secondary-contrast: var(--ink);
  --mint-accent-tertiary: var(--teal);
  --mint-accent-tertiary-contrast: var(--white);
  --mint-accent-secondary-soft: rgba(244, 200, 79, 0.2);
  --mint-accent-tertiary-soft: rgba(23, 155, 146, 0.16);
  --mint-success: var(--green);
  --mint-success-contrast: var(--white);
  background:
    linear-gradient(90deg, rgba(21, 17, 17, 0.06) 1px, transparent 1px),
    linear-gradient(180deg, rgba(21, 17, 17, 0.06) 1px, transparent 1px),
    var(--bg);
  background-size: 32px 32px, 32px 32px, auto;
}

.edition-mint-body[data-edition-theme="dark"] {
  --bg: #15191d;
  --paper: #15191d;
  --panel: #1e242a;
  --panel-2: #252d34;
  --field: #14191e;
  --ink: #fffdf8;
  --text: #fffdf8;
  --muted: #c6ccd2;
  --line: #fffdf8;
  --line-strong: #fffdf8;
  background:
    linear-gradient(90deg, rgba(255, 253, 248, 0.05) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 253, 248, 0.05) 1px, transparent 1px),
    var(--bg);
}

.edition-mint-body.draw-mint-body[data-draw-skin="retro-arcade"] {
  --bg: #101117;
  --paper: #15151d;
  --panel: #191922;
  --panel-2: #0f1118;
  --field: #0a0d12;
  --ink: #fff7db;
  --text: #fff7db;
  --muted: #9be8ff;
  --line: #fff7db;
  --line-strong: #fff7db;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 6px),
    linear-gradient(90deg, rgba(70, 213, 234, 0.18) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 209, 76, 0.14) 1px, transparent 1px),
    #101117;
  background-size: auto, 34px 34px, 34px 34px, auto;
}

.edition-mint-body.draw-mint-body[data-draw-skin="prize-machine"] {
  --bg: #181116;
  --paper: #20151b;
  --panel: #fff6e1;
  --panel-2: #ffcb47;
  --field: #fffdf8;
  --ink: #151111;
  --text: #151111;
  --muted: #6f635b;
  --line: #151111;
  --line-strong: #151111;
  background:
    linear-gradient(90deg, rgba(239, 63, 160, 0.16) 1px, transparent 1px),
    linear-gradient(180deg, rgba(23, 168, 157, 0.14) 1px, transparent 1px),
    #fff7e6;
  background-size: 28px 28px, 28px 28px, auto;
}

.edition-mint-body.draw-mint-body[data-draw-skin="console-terminal"] {
  --bg: #07100d;
  --paper: #07100d;
  --panel: #0c1713;
  --panel-2: #08110e;
  --field: #06100d;
  --ink: #d8ffe3;
  --text: #d8ffe3;
  --muted: #58f5a7;
  --line: #d8ffe3;
  --line-strong: #d8ffe3;
  background:
    repeating-linear-gradient(0deg, rgba(88, 245, 167, 0.06) 0 1px, transparent 1px 5px),
    #07100d;
}

.edition-mint-body.draw-mint-body[data-draw-skin="gacha-machine"] {
  --bg: #101117;
  --paper: #15151d;
  --panel: #191922;
  --panel-2: #0f1118;
  --field: #0a0d12;
  --ink: #fff7db;
  --text: #fff7db;
  --muted: #9be8ff;
  --line: #fff7db;
  --line-strong: #fff7db;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 6px),
    radial-gradient(circle at 22% 18%, var(--mint-accent-secondary-soft), transparent 32%),
    radial-gradient(circle at 82% 72%, var(--mint-accent-tertiary-soft), transparent 34%),
    linear-gradient(90deg, rgba(70, 213, 234, 0.18) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 209, 76, 0.14) 1px, transparent 1px),
    #101117;
  background-size: auto, auto, auto, 34px 34px, 34px 34px, auto;
}

.edition-mint-body.draw-mint-body[data-draw-skin="claw-machine"] {
  --bg: #15141e;
  --paper: #181824;
  --panel: #202130;
  --panel-2: #11141f;
  --field: #0d111b;
  --ink: #fffdf8;
  --text: #fffdf8;
  --muted: #c7e8ff;
  --line: #fffdf8;
  --line-strong: #fffdf8;
  background:
    radial-gradient(circle at 18% 22%, var(--mint-accent-secondary-soft), transparent 30%),
    radial-gradient(circle at 84% 78%, var(--mint-accent-tertiary-soft), transparent 36%),
    linear-gradient(90deg, rgba(255, 253, 248, 0.05) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 253, 248, 0.05) 1px, transparent 1px),
    #15141e;
  background-size: auto, auto, 30px 30px, 30px 30px, auto;
}

.edition-mint-body.draw-mint-body[data-draw-skin="wheel-of-fortune"] {
  --bg: #0c1020;
  --paper: #10162a;
  --panel: #172039;
  --panel-2: #0d1326;
  --field: #080d1b;
  --ink: #fffdf8;
  --text: #fffdf8;
  --muted: #b5dfff;
  --line: #fffdf8;
  --line-strong: #fffdf8;
  background:
    radial-gradient(circle at 50% 28%, var(--mint-accent-secondary-soft), transparent 34%),
    repeating-conic-gradient(from 0deg at 50% 45%, rgba(255, 255, 255, 0.04) 0deg 10deg, transparent 10deg 20deg),
    #0c1020;
}

.edition-mint-body.draw-mint-body[data-draw-skin="vending-machine"] {
  --bg: #0d1712;
  --paper: #13231a;
  --panel: #173123;
  --panel-2: #0c1c14;
  --field: #07140d;
  --ink: #f3ffe8;
  --text: #f3ffe8;
  --muted: #b7ffd1;
  --line: #f3ffe8;
  --line-strong: #f3ffe8;
  background:
    radial-gradient(circle at 20% 14%, var(--mint-accent-secondary-soft), transparent 32%),
    radial-gradient(circle at 78% 80%, var(--mint-accent-tertiary-soft), transparent 36%),
    linear-gradient(90deg, rgba(243, 255, 232, 0.045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(243, 255, 232, 0.045) 1px, transparent 1px),
    #0d1712;
  background-size: auto, auto, 32px 32px, 32px 32px, auto;
}

.edition-mint-body.draw-mint-body[data-draw-skin="frame-grab"] {
  --bg: #f8f2e8;
  --paper: #f8f2e8;
  --panel: #fffaf1;
  --panel-2: #efe7d9;
  --field: #fffaf1;
  --ink: #151111;
  --text: #151111;
  --muted: #756d66;
  --line: #151111;
  --line-strong: #151111;
  background:
    linear-gradient(90deg, rgba(21, 17, 17, 0.045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(21, 17, 17, 0.045) 1px, transparent 1px),
    radial-gradient(circle at 20% 16%, color-mix(in srgb, var(--mint-accent-tertiary) 14%, transparent), transparent 32%),
    radial-gradient(circle at 84% 72%, color-mix(in srgb, var(--mint-accent) 12%, transparent), transparent 34%),
    var(--bg);
  background-size: 32px 32px, 32px 32px, auto, auto, auto;
}

.edition-mint-body.draw-mint-body[data-edition-theme="dark"][data-draw-skin="frame-grab"] {
  --bg: #15191d;
  --paper: #15191d;
  --panel: #1e242a;
  --panel-2: #252d34;
  --field: #0f1317;
  --ink: #fffdf8;
  --text: #fffdf8;
  --muted: #c6ccd2;
  --line: #fffdf8;
  --line-strong: #fffdf8;
  background:
    linear-gradient(90deg, rgba(255, 253, 248, 0.052) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 253, 248, 0.052) 1px, transparent 1px),
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--mint-accent-tertiary) 18%, transparent), transparent 32%),
    radial-gradient(circle at 78% 72%, color-mix(in srgb, var(--mint-accent) 15%, transparent), transparent 36%),
    var(--bg);
  background-size: 32px 32px, 32px 32px, auto, auto, auto;
}

.edition-mint-body .terminal-status {
  box-shadow: none;
}

.edition-opensea-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--mint-accent);
  border-radius: 999px;
  background: rgba(17, 20, 22, 0.88);
  text-decoration: none;
  box-shadow: 0 0 0 1px rgba(246, 242, 234, 0.08);
  backdrop-filter: blur(10px);
}

.edition-opensea-link[hidden] {
  display: none;
}

.edition-opensea-link:hover,
.edition-opensea-link:focus-visible {
  background: rgba(17, 20, 22, 0.96);
  outline: none;
  transform: translateY(-1px);
}

.edition-opensea-link .mint-opensea-icon {
  width: 30px;
  height: 30px;
}

.draw-mint-body .edition-mint-header,
.draw-mint-body .edition-description-card,
.draw-mint-body .edition-mint-card {
  border-width: 3px;
  box-shadow: 7px 7px 0 var(--mint-accent-tertiary), 11px 11px 0 var(--mint-accent-secondary);
}

.draw-mint-body .edition-mint-header h1,
.draw-mint-body .draw-counter-panel h2 {
  color: var(--mint-accent);
  text-shadow:
    3px 3px 0 color-mix(in srgb, var(--field) 84%, #000000),
    6px 6px 0 var(--mint-accent-secondary),
    9px 9px 0 var(--mint-accent-tertiary);
}

.draw-mint-body .edition-phase-summary {
  color: var(--mint-accent-secondary);
}

.draw-mint-body .primary-action {
  box-shadow: 4px 4px 0 var(--mint-accent-secondary);
}

.draw-mint-body .secondary-action,
.draw-mint-body .mini-button {
  box-shadow: 3px 3px 0 var(--mint-accent-tertiary);
}

.draw-machine-grid {
  grid-template-columns: minmax(0, 1120px);
  justify-content: center;
}

.draw-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr);
  gap: clamp(18px, 2.8vw, 34px);
  grid-column: 1 / -1;
  align-items: stretch;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--panel) 82%, var(--mint-accent-secondary) 18%), var(--panel)),
    var(--panel);
  box-shadow: 8px 8px 0 var(--mint-accent-secondary), 14px 14px 0 var(--mint-accent-tertiary);
  overflow: hidden;
  padding: clamp(16px, 3vw, 34px);
}

.draw-machine-panel {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.draw-machine-panel > .eyebrow {
  width: fit-content;
  color: var(--ink);
  background: var(--mint-accent);
  box-shadow: 4px 4px 0 var(--mint-accent-tertiary);
}

.draw-machine-visual {
  position: relative;
  min-height: clamp(360px, 43vw, 540px);
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 28px 24px 34px 20px;
  background:
    radial-gradient(circle at 50% 24%, color-mix(in srgb, var(--mint-accent-secondary) 22%, transparent), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--field) 92%, var(--mint-accent-tertiary) 8%), var(--field));
  box-shadow:
    inset 0 0 0 4px color-mix(in srgb, var(--ink) 18%, transparent),
    inset 11px -11px 0 color-mix(in srgb, var(--ink) 8%, transparent),
    8px 8px 0 var(--mint-accent-tertiary);
  isolation: isolate;
}

.draw-machine-core {
  position: absolute;
  inset: 0;
  z-index: 3;
  transform-origin: 50% 58%;
  animation: drawMachineIdle 2.8s ease-in-out infinite;
}

.draw-machine-visual::before {
  content: "";
  position: absolute;
  inset: 18px 20px 22px 16px;
  z-index: 1;
  border: 2px solid color-mix(in srgb, var(--ink) 28%, transparent);
  border-radius: 30px 20px 32px 24px;
  pointer-events: none;
}

.draw-machine-visual::after {
  display: none;
}

.draw-stage.is-drawing .draw-machine-visual {
  animation: none;
}

.draw-stage.is-drawing .draw-machine-core {
  animation: drawMachineDrawing 0.52s ease-in-out infinite;
}

.frame-grab-machine {
  display: grid;
  place-items: center;
  min-height: clamp(620px, 62vw, 820px);
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 24%, color-mix(in srgb, var(--mint-accent-tertiary) 18%, transparent), transparent 34%),
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 4%, transparent) 1px, transparent 1px),
    linear-gradient(180deg, color-mix(in srgb, var(--ink) 4%, transparent) 1px, transparent 1px),
    color-mix(in srgb, var(--field) 18%, #111923);
  background-size: auto, 28px 28px, 28px 28px, auto;
  box-shadow: 8px 8px 0 color-mix(in srgb, var(--mint-accent-tertiary) 88%, var(--mint-accent) 12%);
}

.draw-frame-grab-canvas {
  display: block;
  width: min(92%, 560px);
  aspect-ratio: 720 / 1000;
  filter: none;
}

.edition-draw-banner-content {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(14px, 2.2vw, 28px);
  align-items: end;
  padding: clamp(18px, 3vw, 34px);
  background: transparent;
  pointer-events: none;
}

.edition-draw-banner-content[hidden] {
  display: none;
}

.edition-draw-banner-content > * {
  pointer-events: auto;
}

.edition-draw-banner-copy {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding-right: clamp(80px, 12vw, 160px);
}

.edition-draw-banner-title-row {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.8vw, 20px);
  min-width: 0;
}

.edition-draw-banner-title-stack {
  display: grid;
  gap: 8px;
  justify-items: start;
  min-width: 0;
}

.edition-draw-banner-logo {
  flex: 0 0 auto;
  width: clamp(54px, 7.4vw, 104px);
  aspect-ratio: 1;
  border: 3px solid #fffdf8;
  border-radius: 8px;
  background: rgba(17, 20, 22, 0.78);
  object-fit: cover;
  box-shadow: none;
}

.edition-draw-banner-logo[hidden] {
  display: none;
}

.edition-draw-banner-copy h1 {
  max-width: 980px;
  margin: 0;
  color: #fffdf8;
  font-size: clamp(42px, 6.5vw, 96px);
  font-weight: 950;
  line-height: 0.92;
  overflow-wrap: anywhere;
  text-shadow:
    3px 3px 0 #151111,
    7px 7px 0 var(--mint-accent),
    11px 11px 0 color-mix(in srgb, var(--mint-accent-tertiary) 74%, #151111);
}

.edition-draw-banner-copy p {
  width: fit-content;
  margin: 0;
  border: 2px solid #fffdf8;
  border-radius: 999px;
  background: rgba(17, 20, 22, 0.86);
  color: #fffdf8;
  padding: 6px 12px;
  font-size: clamp(12px, 1.2vw, 15px);
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 4px 4px 0 var(--mint-accent);
}

.draw-machine-sign {
  position: absolute;
  left: 50%;
  top: 22px;
  z-index: 5;
  width: min(72%, 360px);
  border: 4px solid var(--ink);
  border-radius: 28px 20px 24px 22px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--mint-accent-secondary) 18%, transparent), transparent 52%),
    color-mix(in srgb, var(--mint-accent) 86%, #000000);
  color: var(--mint-accent-contrast);
  font-size: clamp(18px, 3.2vw, 34px);
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0;
  padding: 10px 14px 12px;
  text-align: center;
  text-shadow: 2px 2px 0 color-mix(in srgb, #000000 42%, transparent);
  transform: translateX(-50%) rotate(-1deg);
  box-shadow:
    inset 0 -5px 0 color-mix(in srgb, #000000 16%, transparent),
    5px 5px 0 color-mix(in srgb, var(--mint-accent-tertiary) 72%, #000000);
}

.draw-machine-sign::before,
.draw-machine-sign::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 24px;
  height: 4px;
  border-radius: 999px;
  background: var(--ink);
}

.draw-machine-sign::before {
  left: -38px;
  transform: translateY(-50%) rotate(14deg);
}

.draw-machine-sign::after {
  right: -38px;
  transform: translateY(-50%) rotate(-14deg);
}

.draw-machine-sticker {
  position: absolute;
  z-index: 4;
  display: grid;
  place-items: center;
  border: 4px solid var(--ink);
  color: var(--ink);
  font-weight: 950;
  line-height: 1;
}

.sticker-burst {
  left: 10%;
  bottom: 28%;
  width: 74px;
  aspect-ratio: 1;
  background: var(--mint-accent-secondary);
  clip-path: polygon(50% 0, 59% 22%, 82% 12%, 77% 36%, 100% 45%, 79% 57%, 91% 79%, 66% 74%, 55% 100%, 43% 77%, 20% 90%, 26% 63%, 0 54%, 22% 43%, 9% 20%, 35% 25%);
  transform: rotate(-11deg);
}

.sticker-star {
  right: 12%;
  bottom: 34%;
  width: 46px;
  aspect-ratio: 1;
  background: var(--mint-accent-tertiary);
  clip-path: polygon(50% 0, 61% 34%, 96% 35%, 68% 56%, 78% 91%, 50% 70%, 20% 92%, 32% 56%, 4% 35%, 39% 34%);
  animation: stickerTwinkle 1.6s ease-in-out infinite;
}

.draw-machine-feet {
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 15px;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.draw-machine-feet span {
  width: 44px;
  height: 36px;
  border: 4px solid var(--ink);
  border-radius: 8px 8px 14px 14px;
  background: color-mix(in srgb, var(--mint-accent) 66%, #000000);
  transform: skewX(-7deg);
}

.draw-machine-lights,
.wheel-bulbs {
  position: absolute;
  inset: 10px;
  z-index: 6;
  pointer-events: none;
}

.draw-machine-lights span,
.wheel-bulbs span {
  color: var(--mint-accent-secondary);
  position: absolute;
  width: 15px;
  height: 15px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--mint-accent-secondary);
  box-shadow: 0 0 14px var(--mint-accent-secondary);
  animation: drawBulbPulse 1s steps(2, end) infinite;
  animation-delay: calc(var(--i) * -0.11s);
}

.draw-machine-lights span:nth-child(odd),
.wheel-bulbs span:nth-child(odd) {
  color: var(--mint-accent-tertiary);
  background: var(--mint-accent-tertiary);
  box-shadow: 0 0 14px var(--mint-accent-tertiary);
}

.draw-machine-lights span:nth-child(1) { top: 0; left: 8%; }
.draw-machine-lights span:nth-child(2) { top: 0; left: 22%; }
.draw-machine-lights span:nth-child(3) { top: 0; left: 36%; }
.draw-machine-lights span:nth-child(4) { top: 0; left: 50%; }
.draw-machine-lights span:nth-child(5) { top: 0; left: 64%; }
.draw-machine-lights span:nth-child(6) { top: 0; left: 78%; }
.draw-machine-lights span:nth-child(7) { bottom: 0; left: 16%; }
.draw-machine-lights span:nth-child(8) { bottom: 0; left: 35%; }
.draw-machine-lights span:nth-child(9) { bottom: 0; left: 54%; }
.draw-machine-lights span:nth-child(10) { bottom: 0; left: 73%; }
.draw-machine-lights span:nth-child(11) { top: 36%; left: 0; }
.draw-machine-lights span:nth-child(12) { top: 36%; right: 0; }

.gacha-dome {
  position: absolute;
  top: 14%;
  left: 50%;
  z-index: 2;
  width: min(62%, 360px);
  aspect-ratio: 1;
  border: 5px solid var(--ink);
  border-radius: 48% 52% 43% 46%;
  background:
    radial-gradient(ellipse at 22% 22%, rgba(255, 255, 255, 0.72) 0 7%, transparent 8%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.24), transparent 40%),
    color-mix(in srgb, var(--mint-accent-secondary) 24%, transparent);
  transform: translateX(-50%);
  overflow: hidden;
  box-shadow:
    inset 0 -20px 0 color-mix(in srgb, var(--field) 62%, transparent),
    inset 12px 0 0 color-mix(in srgb, #ffffff 12%, transparent);
}

.gacha-cap {
  position: absolute;
  left: 50%;
  top: 9%;
  z-index: 4;
  width: min(54%, 310px);
  height: 58px;
  border: 5px solid var(--ink);
  border-radius: 60px 60px 14px 14px;
  background:
    radial-gradient(ellipse at 22% 28%, rgba(255, 255, 255, 0.3) 0 10%, transparent 11%),
    color-mix(in srgb, var(--mint-accent) 82%, #000000);
  transform: translateX(-50%) rotate(0.5deg);
  box-shadow: inset 0 -8px 0 color-mix(in srgb, #000000 16%, transparent);
}

.gacha-cap::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -26px;
  width: 46px;
  height: 34px;
  border: 5px solid var(--ink);
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
  background: color-mix(in srgb, var(--mint-accent) 86%, #000000);
  transform: translateX(-50%);
}

.gacha-ball-pit {
  position: absolute;
  inset: 14%;
}

.draw-gacha-ball {
  position: absolute;
  width: clamp(24px, 5vw, 42px);
  aspect-ratio: 1;
  left: var(--x);
  top: var(--y);
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: linear-gradient(180deg, var(--mint-accent-secondary) 0 48%, var(--mint-accent-tertiary) 48% 100%);
  animation: gachaBallWiggle 1.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.09s);
  box-shadow: inset 5px 5px 0 rgba(255, 255, 255, 0.24);
}

.draw-gacha-ball::before {
  content: "";
  position: absolute;
  left: 19%;
  top: 17%;
  width: 26%;
  height: 18%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.62);
}

.draw-ball-1 { background: linear-gradient(180deg, var(--mint-accent) 0 48%, var(--mint-accent-secondary) 48%); }
.draw-ball-2 { background: linear-gradient(180deg, var(--mint-accent-tertiary) 0 48%, #fffdf8 48%); }
.draw-ball-3 { background: linear-gradient(180deg, #fffdf8 0 48%, var(--mint-accent) 48%); }
.draw-ball-4 { background: linear-gradient(180deg, var(--mint-accent-secondary) 0 48%, #111416 48%); }
.draw-ball-5 { background: linear-gradient(180deg, var(--mint-accent) 0 48%, var(--mint-accent-tertiary) 48%); }

.draw-stage.is-drawing .draw-gacha-ball {
  animation-duration: 0.38s;
}

.gacha-body {
  position: absolute;
  left: 50%;
  bottom: 8%;
  z-index: 3;
  width: min(66%, 390px);
  height: 36%;
  border: 5px solid var(--ink);
  border-radius: 24px 22px 34px 30px;
  background:
    linear-gradient(180deg, var(--mint-accent) 0 28%, color-mix(in srgb, var(--mint-accent) 66%, #000000) 28% 100%);
  transform: translateX(-50%);
  box-shadow:
    inset 11px 0 0 color-mix(in srgb, #ffffff 12%, transparent),
    inset 0 -9px 0 color-mix(in srgb, #000000 14%, transparent);
}

.gacha-face {
  position: absolute;
  left: 10%;
  top: 18%;
  display: flex;
  gap: 18px;
}

.gacha-face span {
  width: 16px;
  height: 24px;
  border-radius: 999px;
  background: var(--ink);
  animation: drawBlink 3.6s ease-in-out infinite;
}

.gacha-crank {
  position: absolute;
  right: 13%;
  top: 27%;
  width: 64px;
  aspect-ratio: 1;
  border: 5px solid var(--ink);
  border-radius: 50%;
  background: var(--mint-accent-secondary);
  box-shadow:
    inset 0 0 0 10px var(--panel),
    4px 4px 0 color-mix(in srgb, #000000 34%, transparent);
  animation: gachaCrankIdle 2.2s ease-in-out infinite;
}

.gacha-crank::after {
  content: "";
  position: absolute;
  right: -26px;
  top: 50%;
  width: 34px;
  height: 10px;
  border: 4px solid var(--ink);
  border-radius: 999px;
  background: var(--mint-accent-tertiary);
  transform: translateY(-50%);
}

.draw-stage.is-drawing .gacha-crank {
  animation: gachaCrankSpin 0.44s linear infinite;
}

.gacha-chute {
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 30%;
  height: 24%;
  border: 5px solid var(--ink);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  background: var(--field);
  transform: translateX(-50%);
  box-shadow: inset 0 7px 0 color-mix(in srgb, #000000 32%, transparent);
}

.gacha-output-ball,
.claw-output-gift,
.wheel-output-card,
.vending-output-card {
  position: absolute;
  left: 50%;
  bottom: 6%;
  opacity: 0;
  transform: translate(-50%, 40px) scale(0.6);
}

.gacha-output-ball {
  width: 54px;
  aspect-ratio: 1;
  border: 4px solid var(--ink);
  border-radius: 50%;
  background: linear-gradient(180deg, var(--mint-accent-secondary) 0 50%, var(--mint-accent-tertiary) 50%);
}

.draw-stage.has-result .gacha-output-ball,
.draw-stage.has-result .claw-output-gift,
.draw-stage.has-result .wheel-output-card,
.draw-stage.has-result .vending-output-card {
  animation: drawPrizeSpit 0.9s cubic-bezier(0.2, 1.5, 0.5, 1) both;
}

.claw-cabinet {
  position: absolute;
  inset: 17% 9% 25%;
  z-index: 2;
  border: 5px solid var(--ink);
  border-radius: 30px 24px 28px 22px;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.22) 0 12%, transparent 13% 44%, rgba(255, 255, 255, 0.11) 45% 54%, transparent 55%),
    color-mix(in srgb, var(--mint-accent-secondary) 20%, transparent);
  overflow: hidden;
  box-shadow:
    inset 10px 0 0 color-mix(in srgb, #ffffff 11%, transparent),
    inset 0 -12px 0 color-mix(in srgb, var(--field) 46%, transparent);
}

.claw-cabinet::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 3px solid color-mix(in srgb, var(--ink) 42%, transparent);
  border-radius: 22px 18px 24px 17px;
}

.claw-cabinet::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 4%;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mint-accent-tertiary) 72%, var(--ink));
}

.claw-rail {
  position: absolute;
  top: 13%;
  left: 10%;
  right: 10%;
  height: 12px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: var(--mint-accent-secondary);
  box-shadow: 3px 3px 0 color-mix(in srgb, #000000 32%, transparent);
}

.claw-arm {
  position: absolute;
  top: 13%;
  left: 45%;
  width: 70px;
  height: 140px;
  animation: clawRoam 2.8s ease-in-out infinite;
}

.draw-stage.is-drawing .claw-arm {
  animation: clawDive 1.2s ease-in-out infinite;
}

.claw-cable {
  position: absolute;
  left: 50%;
  top: 0;
  width: 6px;
  height: 86px;
  border-radius: 999px;
  background: var(--ink);
  transform: translateX(-50%);
}

.claw-hand {
  position: absolute;
  left: 50%;
  top: 78px;
  width: 64px;
  height: 42px;
  transform: translateX(-50%);
}

.claw-hand::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 24px;
  height: 20px;
  border: 4px solid var(--ink);
  border-radius: 8px;
  background: var(--mint-accent);
  transform: translateX(-50%);
}

.claw-hand i {
  position: absolute;
  bottom: 0;
  width: 22px;
  height: 34px;
  border: 4px solid var(--ink);
  border-top: 0;
  border-radius: 0 0 14px 14px;
  transform-origin: top center;
}

.claw-hand i:nth-child(1) { left: 5px; transform: rotate(24deg); }
.claw-hand i:nth-child(2) { left: 21px; transform: rotate(0deg); }
.claw-hand i:nth-child(3) { right: 5px; transform: rotate(-24deg); }

.claw-gift-floor {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 5%;
  height: 35%;
}

.claw-gift {
  position: absolute;
  bottom: calc(var(--stack) * 18px);
  left: var(--x);
  width: 54px;
  height: 42px;
  border: 3px solid var(--ink);
  border-radius: 8px;
  background:
    linear-gradient(90deg, transparent 42%, var(--ink) 42% 50%, transparent 50%),
    linear-gradient(180deg, var(--mint-accent-secondary) 0 50%, var(--mint-accent-tertiary) 50%);
  animation: giftWiggle 1.7s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.08s);
  box-shadow: 3px 3px 0 color-mix(in srgb, #000000 28%, transparent);
}

.gift-1 { background-color: var(--mint-accent); }
.gift-2 { background-color: var(--mint-accent-secondary); }
.gift-3 { background-color: var(--mint-accent-tertiary); }
.gift-4 { background-color: #fffdf8; }

.claw-control {
  position: absolute;
  left: 50%;
  bottom: 7%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 42px;
  width: min(66%, 370px);
  height: 76px;
  border: 5px solid var(--ink);
  border-radius: 22px 20px 18px 24px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--mint-accent) 88%, #ffffff) 0 28%, var(--mint-accent) 28%),
    var(--mint-accent);
  transform: translateX(-50%);
  box-shadow:
    inset 8px 0 0 color-mix(in srgb, #ffffff 14%, transparent),
    5px 5px 0 color-mix(in srgb, var(--mint-accent-tertiary) 62%, #000000);
}

.claw-joystick {
  position: relative;
  width: 18px;
  height: 38px;
  border: 4px solid var(--ink);
  border-radius: 999px;
  background: var(--mint-accent-secondary);
  transform-origin: bottom center;
  animation: clawJoystick 1.1s ease-in-out infinite;
}

.claw-joystick::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -22px;
  width: 30px;
  aspect-ratio: 1;
  border: 4px solid var(--ink);
  border-radius: 50%;
  background: var(--mint-accent-tertiary);
  transform: translateX(-50%);
}

.claw-button {
  width: 42px;
  aspect-ratio: 1;
  border: 4px solid var(--ink);
  border-radius: 50%;
  background: var(--mint-accent-secondary);
  animation: drawBulbPulse 0.9s steps(2, end) infinite;
}

.claw-button.is-secondary {
  width: 32px;
  background: var(--mint-accent-tertiary);
  animation-delay: -0.3s;
}

.claw-output-gift {
  width: 66px;
  height: 52px;
  border: 4px solid var(--ink);
  border-radius: 8px;
  background:
    linear-gradient(90deg, transparent 42%, var(--ink) 42% 50%, transparent 50%),
    linear-gradient(180deg, var(--mint-accent-secondary) 0 50%, var(--mint-accent-tertiary) 50%);
}

.fortune-wheel {
  position: absolute;
  left: 50%;
  top: 49%;
  z-index: 3;
  width: min(66%, 380px);
  aspect-ratio: 1;
  border: 7px solid var(--ink);
  border-radius: 50%;
  background:
    conic-gradient(
      var(--mint-accent) 0deg 45deg,
      var(--mint-accent-secondary) 45deg 90deg,
      var(--mint-accent-tertiary) 90deg 135deg,
      #fffdf8 135deg 180deg,
      var(--mint-accent) 180deg 225deg,
      var(--mint-accent-secondary) 225deg 270deg,
      var(--mint-accent-tertiary) 270deg 315deg,
      #fffdf8 315deg 360deg
    );
  transform: translate(-50%, -50%);
  box-shadow:
    inset 0 0 0 14px color-mix(in srgb, var(--field) 74%, transparent),
    inset 0 0 0 22px color-mix(in srgb, var(--ink) 18%, transparent),
    8px 8px 0 color-mix(in srgb, #000000 34%, transparent);
  animation: wheelIdle 8s linear infinite;
}

.fortune-wheel::before {
  content: "";
  position: absolute;
  inset: 10%;
  border: 3px dashed color-mix(in srgb, var(--ink) 72%, transparent);
  border-radius: 50%;
}

.draw-stage.is-drawing .fortune-wheel {
  animation: wheelFast 0.42s linear infinite;
}

.draw-stage.has-result:not(.is-drawing) .fortune-wheel {
  animation: wheelSettle 1.3s cubic-bezier(0.12, 0.76, 0.28, 1.02) both;
}

.fortune-wheel span {
  position: absolute;
  left: 50%;
  top: 50%;
  color: #151111;
  font-size: clamp(9px, 1.6vw, 16px);
  font-weight: 950;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
  transform: rotate(var(--r)) translateY(-42%) translateX(-50%);
  transform-origin: 0 0;
}

.wheel-center {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 25%;
  aspect-ratio: 1;
  border: 5px solid var(--ink);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.38) 0 16%, transparent 17%),
    var(--mint-accent-secondary);
  transform: translate(-50%, -50%);
  box-shadow: 4px 4px 0 color-mix(in srgb, #000000 32%, transparent);
}

.wheel-pointer {
  position: absolute;
  z-index: 5;
  top: 13%;
  left: 50%;
  width: 0;
  height: 0;
  border-left: 24px solid transparent;
  border-right: 24px solid transparent;
  border-top: 48px solid var(--mint-accent-secondary);
  filter: drop-shadow(0 3px 0 var(--ink));
  transform: translateX(-50%);
}

.wheel-bulbs {
  z-index: 4;
  inset: 8% 15%;
  animation: wheelBulbOrbit 1.8s linear infinite;
}

.wheel-bulbs span:nth-child(1) { left: 50%; top: 0; }
.wheel-bulbs span:nth-child(2) { left: 66%; top: 3%; }
.wheel-bulbs span:nth-child(3) { left: 80%; top: 12%; }
.wheel-bulbs span:nth-child(4) { left: 91%; top: 26%; }
.wheel-bulbs span:nth-child(5) { left: 98%; top: 43%; }
.wheel-bulbs span:nth-child(6) { left: 97%; top: 60%; }
.wheel-bulbs span:nth-child(7) { left: 88%; top: 76%; }
.wheel-bulbs span:nth-child(8) { left: 74%; top: 90%; }
.wheel-bulbs span:nth-child(9) { left: 58%; top: 98%; }
.wheel-bulbs span:nth-child(10) { left: 40%; top: 98%; }
.wheel-bulbs span:nth-child(11) { left: 24%; top: 90%; }
.wheel-bulbs span:nth-child(12) { left: 10%; top: 76%; }
.wheel-bulbs span:nth-child(13) { left: 2%; top: 60%; }
.wheel-bulbs span:nth-child(14) { left: 1%; top: 43%; }
.wheel-bulbs span:nth-child(15) { left: 8%; top: 26%; }
.wheel-bulbs span:nth-child(16) { left: 19%; top: 12%; }
.wheel-bulbs span:nth-child(17) { left: 33%; top: 3%; }
.wheel-bulbs span:nth-child(18) { left: 50%; top: 0; }

.wheel-stand {
  position: absolute;
  left: 50%;
  bottom: 7%;
  z-index: 2;
  width: min(44%, 260px);
  height: 90px;
  border: 5px solid var(--ink);
  border-radius: 28px 26px 14px 16px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--mint-accent) 82%, #ffffff) 0 30%, var(--mint-accent) 30%),
    var(--mint-accent);
  transform: translateX(-50%);
  box-shadow:
    inset 8px 0 0 color-mix(in srgb, #ffffff 12%, transparent),
    5px 5px 0 color-mix(in srgb, #000000 30%, transparent);
}

.wheel-stand span {
  position: absolute;
  left: 50%;
  top: -96px;
  width: 36px;
  height: 120px;
  border: 5px solid var(--ink);
  border-radius: 999px;
  background: var(--mint-accent-secondary);
  transform: translateX(-50%);
}

.wheel-output-card {
  width: 68px;
  height: 52px;
  border: 4px solid var(--ink);
  border-radius: 8px;
  background: linear-gradient(135deg, var(--mint-accent-secondary), var(--mint-accent-tertiary));
}

.vending-machine {
  background:
    radial-gradient(circle at 52% 28%, color-mix(in srgb, var(--mint-accent) 24%, transparent), transparent 36%),
    linear-gradient(180deg, color-mix(in srgb, var(--field) 84%, var(--mint-accent) 16%), var(--field));
}

.vending-cabinet {
  position: absolute;
  left: 50%;
  top: 15%;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(118px, 0.65fr);
  grid-template-rows: 1fr 66px;
  gap: 12px;
  width: min(78%, 460px);
  height: 72%;
  border: 6px solid var(--ink);
  border-radius: 28px 20px 34px 24px;
  background:
    linear-gradient(105deg, color-mix(in srgb, var(--mint-accent) 78%, #ffffff) 0 16%, var(--mint-accent) 17% 100%);
  padding: 16px;
  transform: translateX(-50%) rotate(-0.4deg);
  box-shadow:
    inset 11px 0 0 color-mix(in srgb, #ffffff 13%, transparent),
    inset 0 -13px 0 color-mix(in srgb, #000000 14%, transparent),
    8px 8px 0 color-mix(in srgb, #000000 31%, transparent);
}

.vending-window {
  position: relative;
  overflow: hidden;
  border: 5px solid var(--ink);
  border-radius: 18px 14px 18px 12px;
  background:
    radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--mint-accent-secondary) 42%, transparent) 0 29%, transparent 30%),
    linear-gradient(115deg, rgba(255, 255, 255, 0.2) 0 11%, transparent 12% 42%, rgba(255, 255, 255, 0.1) 43% 52%, transparent 53%),
    color-mix(in srgb, var(--field) 72%, var(--mint-accent-tertiary) 28%);
}

.vending-prize-wall {
  position: absolute;
  inset: 12px;
}

.vending-prize {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: clamp(26px, 4.8vw, 44px);
  aspect-ratio: 1;
  border: 3px solid var(--ink);
  border-radius: 11px 15px 10px 14px;
  background:
    linear-gradient(90deg, transparent 42%, color-mix(in srgb, var(--ink) 80%, transparent) 43% 50%, transparent 51%),
    linear-gradient(180deg, var(--mint-accent-secondary) 0 50%, var(--mint-accent-tertiary) 50%);
  animation: vendingPrizeWiggle 1.5s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.07s);
  box-shadow: 3px 3px 0 color-mix(in srgb, #000000 30%, transparent);
}

.prize-1 { background-color: var(--mint-accent); }
.prize-2 { background-color: var(--mint-accent-secondary); }
.prize-3 { background-color: var(--mint-accent-tertiary); }
.prize-4 { background-color: #fffdf8; }
.prize-5 { border-radius: 50%; }

.vending-question {
  position: absolute;
  left: 50%;
  top: 51%;
  color: color-mix(in srgb, var(--mint-accent-secondary) 72%, var(--mint-accent));
  font-size: clamp(130px, 22vw, 230px);
  font-weight: 950;
  line-height: 0.8;
  opacity: 0.55;
  text-shadow:
    4px 4px 0 color-mix(in srgb, #000000 24%, transparent),
    -2px -2px 0 color-mix(in srgb, #ffffff 16%, transparent);
  transform: translate(-50%, -50%) rotate(-6deg);
}

.vending-control {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
}

.vending-display {
  display: grid;
  place-items: center;
  min-height: 64px;
  border: 4px solid var(--ink);
  border-radius: 12px 10px 14px 10px;
  background: color-mix(in srgb, var(--field) 80%, #000000);
  color: var(--mint-accent-secondary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: clamp(14px, 2vw, 20px);
  font-weight: 950;
  text-align: center;
  text-shadow: 0 0 10px var(--mint-accent-secondary);
  animation: vendingDisplayBlink 1.4s steps(2, end) infinite;
}

.vending-control > span:not(.vending-knob) {
  display: grid;
  place-items: center;
  min-height: 74px;
  border: 4px solid var(--ink);
  border-radius: 14px 12px 16px 12px;
  background:
    linear-gradient(180deg, color-mix(in srgb, #ffffff 16%, transparent), transparent 40%),
    var(--mint-accent-secondary);
  color: var(--mint-accent-secondary-contrast);
  font-size: clamp(20px, 3vw, 34px);
  font-weight: 950;
  line-height: 0.92;
  text-align: center;
  box-shadow: 4px 4px 0 color-mix(in srgb, #000000 30%, transparent);
  animation: vendingButtonGlow 1.6s ease-in-out infinite;
}

.vending-control > span:not(.vending-knob):nth-child(3) {
  background:
    linear-gradient(180deg, color-mix(in srgb, #ffffff 16%, transparent), transparent 40%),
    var(--mint-accent-tertiary);
  animation-delay: -0.45s;
}

.vending-knob {
  justify-self: center;
  width: 54px;
  aspect-ratio: 1;
  border: 5px solid var(--ink);
  border-radius: 50%;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.38), transparent 38%),
    color-mix(in srgb, var(--ink) 74%, var(--field));
  box-shadow: inset 0 0 0 8px color-mix(in srgb, var(--field) 70%, transparent);
  animation: vendingKnobIdle 2s ease-in-out infinite;
}

.draw-stage.is-drawing .vending-knob {
  animation: vendingKnobSpin 0.42s linear infinite;
}

.vending-slot {
  grid-column: 1 / -1;
  border: 5px solid var(--ink);
  border-radius: 12px 10px 14px 11px;
  background: color-mix(in srgb, var(--field) 88%, #000000);
  box-shadow: inset 0 9px 0 color-mix(in srgb, #000000 34%, transparent);
}

.vending-output-card {
  width: 70px;
  height: 54px;
  border: 4px solid var(--ink);
  border-radius: 11px;
  background:
    linear-gradient(90deg, transparent 42%, var(--ink) 42% 50%, transparent 50%),
    linear-gradient(180deg, var(--mint-accent-secondary) 0 52%, var(--mint-accent-tertiary) 52%);
}

.draw-machine-visual {
  background:
    radial-gradient(circle at 20% 12%, color-mix(in srgb, #ffffff 22%, transparent) 0 9%, transparent 10%),
    radial-gradient(circle at 82% 22%, color-mix(in srgb, var(--mint-accent-secondary) 28%, transparent), transparent 32%),
    linear-gradient(140deg, color-mix(in srgb, var(--field) 86%, var(--mint-accent) 14%), color-mix(in srgb, var(--field) 92%, #000000 8%));
}

.draw-sketch-machine {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.draw-sketch-machine * {
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
}

.sketch-machine-ink,
.sketch-machine-ink path,
.sketch-machine-ink circle,
.sketch-machine-ink rect,
.sketch-machine-ink ellipse {
  stroke: var(--ink);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sketch-sign-panel,
.sketch-gacha-body,
.sketch-claw-console,
.sketch-wheel-base,
.sketch-vending-cabinet {
  fill: color-mix(in srgb, var(--mint-accent) 82%, #000000);
}

.sketch-sign-panel {
  filter: drop-shadow(8px 8px 0 color-mix(in srgb, var(--mint-accent-secondary) 66%, #000000));
}

.sketch-cap,
.sketch-claw-cabinet,
.sketch-vending-panel {
  fill: color-mix(in srgb, var(--mint-accent) 76%, #ffffff);
}

.sketch-glass,
.sketch-vending-window {
  fill: color-mix(in srgb, var(--mint-accent-secondary) 22%, transparent);
}

.sketch-glass-shadow,
.sketch-mystery-blob,
.sketch-mystery-dot {
  fill: color-mix(in srgb, var(--mint-accent-secondary) 58%, var(--mint-accent));
  stroke: none;
}

.sketch-glass-shine,
.sketch-body-highlight,
.sketch-rail,
.sketch-shelf,
.sketch-led-bars,
.sketch-coin-slot {
  fill: none;
  stroke: color-mix(in srgb, #fff7db 82%, var(--mint-accent-secondary));
  stroke-width: 7;
}

.sketch-dome-line,
.sketch-wheel-rim {
  fill: none;
  stroke: #fff7db;
  stroke-width: 7;
}

.sketch-bulb {
  fill: var(--mint-accent-secondary);
  stroke: #fff7db;
  stroke-width: 4;
  filter: drop-shadow(0 0 10px var(--mint-accent-secondary));
  animation: sketchBulbBlink 1.1s steps(2, end) infinite;
  animation-delay: calc(var(--i) * -0.12s);
}

.sketch-bulb.is-alt {
  fill: var(--mint-accent-tertiary);
  filter: drop-shadow(0 0 10px var(--mint-accent-tertiary));
}

.sketch-sparkle {
  fill: var(--mint-accent-secondary);
  stroke: var(--ink);
  stroke-width: 3;
  animation: drawSparklePop 1.8s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.2s);
}

.sketch-sparkle.is-alt {
  fill: var(--mint-accent-tertiary);
}

.sketch-gacha-ball {
  animation: sketchBallJiggle 1.35s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.08s);
}

.sketch-gacha-ball circle:first-child {
  fill: var(--mint-accent-secondary);
}

.sketch-ball-1 circle:first-child,
.sketch-ball-4 circle:first-child {
  fill: var(--mint-accent);
}

.sketch-ball-2 circle:first-child,
.sketch-ball-5 circle:first-child {
  fill: var(--mint-accent-tertiary);
}

.sketch-ball-3 circle:first-child {
  fill: #fff7db;
}

.sketch-gacha-ball path {
  fill: none;
  stroke-width: 4;
}

.sketch-ball-shine {
  fill: rgba(255, 255, 255, 0.68);
  stroke: none;
}

.sketch-machine-dots circle,
.sketch-button,
.sketch-vend-button {
  fill: var(--mint-accent-secondary);
}

.sketch-sticker,
.sketch-output-card,
.sketch-output-gift,
.sketch-foot {
  fill: var(--mint-accent-tertiary);
}

.sketch-crank {
  animation: gachaCrankIdle 2.1s ease-in-out infinite;
}

.sketch-crank circle:first-child,
.sketch-wheel-center,
.sketch-vending-knob circle,
.sketch-output-ball {
  fill: var(--mint-accent-secondary);
}

.sketch-crank circle:nth-child(2),
.sketch-chute,
.sketch-coin-return,
.sketch-vending-slot {
  fill: color-mix(in srgb, var(--field) 88%, #000000);
}

.draw-stage.is-drawing .sketch-crank {
  animation: gachaCrankSpin 0.42s linear infinite;
}

.sketch-claw-gift,
.sketch-vending-prize {
  animation: sketchPrizeWiggle 1.55s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.08s);
}

.sketch-claw-gift path:first-child,
.sketch-vending-prize path:first-child,
.sketch-vending-prize circle:first-child {
  fill: var(--mint-accent-secondary);
}

.sketch-gift-1 path:first-child,
.sketch-prize-1 path:first-child,
.sketch-prize-1 circle:first-child {
  fill: var(--mint-accent);
}

.sketch-gift-2 path:first-child,
.sketch-prize-2 path:first-child,
.sketch-prize-2 circle:first-child {
  fill: var(--mint-accent-tertiary);
}

.sketch-gift-3 path:first-child,
.sketch-prize-3 path:first-child,
.sketch-prize-3 circle:first-child {
  fill: #fff7db;
}

.sketch-claw-head {
  animation: sketchClawRoam 3s ease-in-out infinite;
}

.draw-stage.is-drawing .sketch-claw-head {
  animation: sketchClawDive 1.2s ease-in-out infinite;
}

.sketch-cable,
.sketch-claw-prong,
.sketch-vending-knob path,
.sketch-joystick path {
  fill: none;
}

.sketch-claw-box,
.sketch-joystick circle {
  fill: var(--mint-accent);
}

.sketch-prize-floor,
.sketch-wheel-rays {
  fill: none;
  stroke: color-mix(in srgb, var(--mint-accent-secondary) 74%, #fff7db);
  stroke-width: 5;
  opacity: 0.78;
}

.sketch-wheel-loop {
  animation: sketchWheelIdle 8s linear infinite;
}

.draw-stage.is-drawing .sketch-wheel-loop {
  animation: sketchWheelFast 0.42s linear infinite;
}

.draw-stage.has-result:not(.is-drawing) .sketch-wheel-loop {
  animation: sketchWheelSettle 1.2s cubic-bezier(0.12, 0.76, 0.28, 1.02) both;
}

.sketch-wheel-slice {
  stroke-width: 5;
}

.sketch-slice-0 { fill: var(--mint-accent); }
.sketch-slice-1 { fill: var(--mint-accent-secondary); }
.sketch-slice-2 { fill: var(--mint-accent-tertiary); }
.sketch-slice-3 { fill: #fff7db; }

.sketch-wheel-inner {
  fill: color-mix(in srgb, var(--field) 72%, var(--mint-accent) 28%);
}

.sketch-wheel-mark {
  fill: color-mix(in srgb, var(--field) 72%, #ffffff);
  stroke-width: 4;
}

.sketch-pointer {
  fill: var(--mint-accent-secondary);
}

.sketch-wheel-post {
  fill: color-mix(in srgb, var(--mint-accent-secondary) 75%, #ffffff);
}

.sketch-vending-prize path:nth-child(2),
.sketch-claw-gift path:nth-child(2),
.sketch-claw-gift path:nth-child(3) {
  fill: none;
  stroke-width: 4;
}

.sketch-vend-button {
  animation: vendingButtonGlow 1.5s ease-in-out infinite;
}

.sketch-vend-button.is-alt {
  fill: var(--mint-accent-tertiary);
  animation-delay: -0.45s;
}

.sketch-vending-knob {
  animation: vendingKnobIdle 2s ease-in-out infinite;
}

.draw-stage.is-drawing .sketch-vending-knob {
  animation: vendingKnobSpin 0.42s linear infinite;
}

.sketch-output {
  opacity: 0;
  transform: translateY(22px) scale(0.62);
}

.draw-stage.has-result .sketch-output {
  animation: sketchOutputPop 0.82s cubic-bezier(0.2, 1.5, 0.5, 1) both;
}

.draw-machine-visual {
  --sketch-paper: #fbf5e7;
  --sketch-cream: #f4ecd4;
  --sketch-ink: #263c34;
  --sketch-shadow: #6c877b;
  --sketch-deep: color-mix(in srgb, var(--mint-accent-secondary) 34%, #253f38);
  --sketch-teal: color-mix(in srgb, var(--mint-accent-secondary) 62%, #168d80);
  --sketch-rose: color-mix(in srgb, var(--mint-accent) 64%, #e57587);
  --sketch-gold: color-mix(in srgb, var(--mint-accent-tertiary) 54%, #e1b94c);
  --sketch-black: #0f1b1a;
  border-color: var(--sketch-ink);
  border-radius: 30px 24px 36px 22px;
  background:
    radial-gradient(circle at 50% 12%, color-mix(in srgb, var(--sketch-teal) 13%, transparent), transparent 30%),
    linear-gradient(90deg, color-mix(in srgb, var(--sketch-ink) 7%, transparent) 1px, transparent 1px),
    linear-gradient(0deg, color-mix(in srgb, var(--sketch-ink) 5%, transparent) 1px, transparent 1px),
    linear-gradient(145deg, #fffaf0 0%, var(--sketch-paper) 57%, color-mix(in srgb, var(--sketch-teal) 15%, var(--sketch-paper)) 100%);
  background-size: auto, 18px 18px, 18px 18px, auto;
  box-shadow:
    inset 0 0 0 5px color-mix(in srgb, var(--sketch-ink) 12%, transparent),
    inset 16px -12px 0 color-mix(in srgb, var(--sketch-shadow) 23%, transparent),
    11px 11px 0 color-mix(in srgb, var(--sketch-shadow) 82%, #000000);
}

.draw-machine-visual::before {
  border-color: color-mix(in srgb, var(--sketch-ink) 34%, transparent);
  background:
    radial-gradient(circle at 16% 22%, color-mix(in srgb, #ffffff 58%, transparent) 0 7%, transparent 8%),
    radial-gradient(circle at 78% 18%, color-mix(in srgb, var(--sketch-gold) 18%, transparent), transparent 18%);
}

.draw-machine-visual::after {
  background: color-mix(in srgb, var(--sketch-ink) 31%, transparent);
}

.draw-machine-core,
.draw-stage.is-drawing .draw-machine-core {
  animation: none;
}

.draw-sketch-machine {
  filter: drop-shadow(10px 10px 0 color-mix(in srgb, var(--sketch-shadow) 70%, transparent));
}

.sketch-machine-ink,
.sketch-machine-ink path,
.sketch-machine-ink circle,
.sketch-machine-ink rect,
.sketch-machine-ink ellipse {
  stroke: var(--sketch-ink);
  stroke-width: 5.5;
}

.sketch-sign-panel,
.sketch-gacha-body,
.sketch-claw-cabinet,
.sketch-wheel-cabinet,
.sketch-vending-cabinet {
  fill: var(--sketch-cream);
}

.sketch-sign-panel {
  filter: drop-shadow(7px 7px 0 color-mix(in srgb, var(--sketch-teal) 74%, var(--sketch-ink)));
}

.sketch-cap,
.sketch-claw-console,
.sketch-vending-panel,
.sketch-wheel-post,
.sketch-side-pipe,
.sketch-funnel {
  fill: var(--sketch-teal);
}

.sketch-gacha-body,
.sketch-claw-console,
.sketch-wheel-base,
.sketch-vending-slot {
  filter: drop-shadow(0 5px 0 color-mix(in srgb, var(--sketch-ink) 22%, transparent));
}

.sketch-glass,
.sketch-vending-window {
  fill: color-mix(in srgb, var(--sketch-teal) 22%, transparent);
}

.sketch-glass-shadow,
.sketch-mystery-blob,
.sketch-mystery-dot {
  fill: color-mix(in srgb, var(--sketch-teal) 48%, var(--sketch-ink));
  opacity: 0.58;
}

.sketch-glass-shine,
.sketch-body-highlight,
.sketch-rail,
.sketch-shelf,
.sketch-led-bars,
.sketch-coin-slot {
  stroke: color-mix(in srgb, #fff9df 83%, var(--sketch-teal));
}

.sketch-dome-line,
.sketch-wheel-rim {
  stroke: #fff9df;
}

.sketch-bulb {
  fill: var(--sketch-teal);
  stroke: #fff9df;
  filter: drop-shadow(0 0 11px var(--sketch-teal));
  animation: sketchBulbBlink 1.1s steps(2, end) infinite;
}

.draw-stage.is-drawing .sketch-bulb {
  animation-duration: 0.48s;
}

.sketch-bulb.is-alt {
  fill: var(--sketch-rose);
  filter: drop-shadow(0 0 11px var(--sketch-rose));
}

.sketch-sparkle {
  fill: var(--sketch-teal);
  stroke: var(--sketch-ink);
  opacity: 0.7;
  animation: sketchAmbientTwinkle 2.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.19s);
}

.sketch-sparkle.is-alt {
  fill: var(--sketch-gold);
}

.sketch-gacha-ball,
.sketch-crank,
.sketch-claw-head,
.sketch-claw-gift,
.sketch-vending-prize,
.sketch-wheel-loop,
.sketch-vend-button,
.sketch-vending-knob,
.sketch-gear,
.sketch-coin {
  animation: none;
}

.sketch-gacha-ball circle:first-child,
.sketch-claw-gift path:first-child,
.sketch-vending-prize path:first-child,
.sketch-vending-prize circle:first-child,
.sketch-button,
.sketch-vend-button {
  fill: var(--sketch-teal);
}

.sketch-ball-1 circle:first-child,
.sketch-ball-4 circle:first-child,
.sketch-gift-1 path:first-child,
.sketch-prize-1 path:first-child,
.sketch-prize-1 circle:first-child,
.sketch-vend-button.is-alt {
  fill: var(--sketch-rose);
}

.sketch-ball-2 circle:first-child,
.sketch-ball-5 circle:first-child,
.sketch-gift-2 path:first-child,
.sketch-prize-2 path:first-child,
.sketch-prize-2 circle:first-child,
.sketch-sticker,
.sketch-output-card,
.sketch-output-gift,
.sketch-foot {
  fill: var(--sketch-gold);
}

.sketch-ball-3 circle:first-child,
.sketch-gift-3 path:first-child,
.sketch-prize-3 path:first-child,
.sketch-prize-3 circle:first-child {
  fill: #fff9df;
}

.sketch-crank circle:first-child,
.sketch-wheel-center,
.sketch-vending-knob circle,
.sketch-output-ball {
  fill: var(--sketch-teal);
}

.sketch-crank circle:nth-child(2),
.sketch-chute,
.sketch-coin-return,
.sketch-vending-slot {
  fill: var(--sketch-black);
}

.sketch-machine-dots circle,
.sketch-joystick circle,
.sketch-claw-box {
  fill: var(--sketch-rose);
}

.sketch-prize-floor,
.sketch-wheel-rays {
  stroke: color-mix(in srgb, var(--sketch-teal) 72%, #fff9df);
}

.sketch-wheel-base {
  fill: var(--sketch-cream);
}

.sketch-wheel-slice {
  stroke: var(--sketch-ink);
}

.sketch-slice-0 { fill: var(--sketch-rose); }
.sketch-slice-1 { fill: var(--sketch-teal); }
.sketch-slice-2 { fill: var(--sketch-gold); }
.sketch-slice-3 { fill: #fff9df; }

.sketch-wheel-inner {
  fill: color-mix(in srgb, var(--sketch-teal) 34%, var(--sketch-paper));
}

.sketch-wheel-mark {
  fill: #fff9df;
}

.sketch-pointer {
  fill: var(--sketch-rose);
}

.sketch-gear path,
.sketch-gear circle,
.sketch-coin path {
  fill: none;
}

.sketch-gear circle:first-of-type {
  fill: color-mix(in srgb, var(--sketch-teal) 42%, var(--sketch-paper));
}

.sketch-gear circle:last-of-type {
  fill: var(--sketch-gold);
}

.sketch-coin ellipse {
  fill: var(--sketch-gold);
  stroke: var(--sketch-ink);
  stroke-width: 4;
}

.sketch-coin path {
  stroke: color-mix(in srgb, #fff9df 78%, var(--sketch-gold));
  stroke-width: 3;
}

.draw-stage.is-drawing .sketch-gacha-ball {
  animation: sketchGachaTumble 0.68s cubic-bezier(0.28, 0.84, 0.42, 1) infinite;
  animation-delay: calc(var(--i) * -0.055s);
}

.draw-stage.is-drawing .draw-sketch-gacha .sketch-gear,
.draw-stage.is-drawing .draw-sketch-vending .sketch-gear {
  animation: sketchGearSpin 0.82s linear infinite;
}

.draw-stage.is-drawing .sketch-gear-wrap.is-small .sketch-gear {
  animation-duration: 0.58s;
  animation-direction: reverse;
}

.draw-stage.is-drawing .sketch-crank,
.draw-stage.is-drawing .sketch-vending-knob {
  animation: gachaCrankSpin 0.42s linear infinite;
}

.draw-stage.is-drawing .sketch-claw-head {
  animation: sketchClawGrab 1.65s cubic-bezier(0.34, 0.02, 0.18, 1) infinite;
}

.draw-stage.is-drawing .sketch-claw-gift,
.draw-stage.is-drawing .sketch-vending-prize {
  animation: sketchPrizeRattle 0.62s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.055s);
}

.draw-stage.is-drawing .sketch-wheel-loop {
  animation: sketchWheelFast 0.38s linear infinite;
}

.draw-stage.has-result:not(.is-drawing) .sketch-wheel-loop {
  animation: none;
}

.draw-stage.is-drawing .sketch-vend-button {
  animation: vendingButtonGlow 0.55s ease-in-out infinite;
}

.draw-stage.is-drawing .sketch-coin {
  animation: sketchCoinToss 1.05s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.1s);
}

.draw-stage.is-drawing .sketch-side-pipe,
.draw-stage.is-drawing .sketch-funnel {
  animation: sketchPipePulse 0.76s ease-in-out infinite;
}

.draw-machine-aura {
  position: absolute;
  inset: 6%;
  z-index: 0;
  border-radius: 34% 46% 42% 38%;
  background:
    radial-gradient(circle at 48% 42%, color-mix(in srgb, var(--mint-accent) 34%, transparent), transparent 43%),
    radial-gradient(circle at 58% 55%, color-mix(in srgb, var(--mint-accent-secondary) 26%, transparent), transparent 52%);
  filter: blur(18px);
  opacity: 0.78;
  animation: drawMachineAuraPulse 2.4s ease-in-out infinite;
}

.draw-machine-sparkles {
  position: absolute;
  inset: 9% 8% 12%;
  z-index: 7;
  pointer-events: none;
}

.draw-machine-sparkles span {
  position: absolute;
  width: clamp(10px, 1.8vw, 18px);
  aspect-ratio: 1;
  background: var(--mint-accent-secondary);
  clip-path: polygon(50% 0, 63% 36%, 100% 50%, 63% 64%, 50% 100%, 37% 64%, 0 50%, 37% 36%);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--mint-accent-secondary) 74%, transparent));
  animation: drawSparklePop 1.7s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.19s);
}

.draw-machine-sparkles span:nth-child(1) { left: 8%; top: 18%; }
.draw-machine-sparkles span:nth-child(2) { left: 18%; top: 53%; background: var(--mint-accent-tertiary); }
.draw-machine-sparkles span:nth-child(3) { right: 14%; top: 20%; }
.draw-machine-sparkles span:nth-child(4) { right: 8%; top: 58%; background: var(--mint-accent-tertiary); }
.draw-machine-sparkles span:nth-child(5) { left: 42%; top: 8%; }
.draw-machine-sparkles span:nth-child(6) { left: 58%; bottom: 12%; background: var(--mint-accent-tertiary); }
.draw-machine-sparkles span:nth-child(7) { left: 26%; bottom: 16%; }
.draw-machine-sparkles span:nth-child(8) { right: 28%; bottom: 24%; background: var(--mint-accent-tertiary); }

.draw-machine-sign {
  text-transform: none;
  outline: 2px solid color-mix(in srgb, #ffffff 24%, transparent);
  outline-offset: -9px;
  min-height: clamp(54px, 7vw, 82px);
  padding: 0;
  font-size: 0;
  background:
    radial-gradient(circle at 18% 38%, color-mix(in srgb, #ffffff 34%, transparent) 0 9%, transparent 10%),
    radial-gradient(circle at 84% 42%, color-mix(in srgb, #ffffff 22%, transparent) 0 6%, transparent 7%),
    repeating-linear-gradient(90deg, color-mix(in srgb, #ffffff 18%, transparent) 0 14px, transparent 14px 30px),
    color-mix(in srgb, var(--mint-accent) 86%, #000000);
}

.draw-machine-lights span,
.wheel-bulbs span {
  box-shadow:
    0 0 8px currentColor,
    0 0 18px color-mix(in srgb, var(--mint-accent-secondary) 70%, transparent),
    2px 2px 0 color-mix(in srgb, #000000 30%, transparent);
}

.gacha-machine {
  background:
    radial-gradient(circle at 50% 22%, color-mix(in srgb, var(--mint-accent-secondary) 32%, transparent), transparent 34%),
    radial-gradient(circle at 48% 36%, color-mix(in srgb, #ffffff 14%, transparent), transparent 28%),
    linear-gradient(180deg, color-mix(in srgb, var(--field) 72%, var(--mint-accent-tertiary) 28%), var(--field));
}

.gacha-sign {
  top: 18px;
  width: min(68%, 390px);
  border-radius: 40px 34px 36px 28px;
}

.gacha-dome {
  top: 13%;
  width: min(69%, 410px);
  border-width: 6px;
  background:
    radial-gradient(ellipse at 23% 20%, rgba(255, 255, 255, 0.82) 0 7%, transparent 8%),
    radial-gradient(ellipse at 36% 30%, rgba(255, 255, 255, 0.34) 0 13%, transparent 14%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.3), transparent 38%),
    color-mix(in srgb, var(--mint-accent-secondary) 26%, transparent);
  box-shadow:
    inset 0 -24px 0 color-mix(in srgb, var(--field) 58%, transparent),
    inset 14px 0 0 color-mix(in srgb, #ffffff 14%, transparent),
    0 0 0 8px color-mix(in srgb, var(--mint-accent) 22%, transparent),
    0 18px 0 color-mix(in srgb, #000000 18%, transparent);
  animation: gachaDomeBreathe 2.8s ease-in-out infinite;
}

.gacha-dome-reflection {
  position: absolute;
  inset: 8% auto auto 12%;
  z-index: 3;
  width: 28%;
  height: 48%;
  border-radius: 50%;
  border-left: 12px solid rgba(255, 255, 255, 0.44);
  transform: rotate(26deg);
  pointer-events: none;
}

.gacha-ball-pit::before,
.gacha-ball-pit::after {
  content: "";
  position: absolute;
  inset: auto 8% 2% 8%;
  height: 16%;
  border-radius: 50%;
  background: color-mix(in srgb, var(--mint-accent-tertiary) 28%, transparent);
  filter: blur(8px);
}

.gacha-ball-pit::after {
  inset: 14% 18% auto;
  height: 10%;
  background: color-mix(in srgb, #ffffff 20%, transparent);
}

.draw-gacha-ball {
  box-shadow:
    inset 5px 5px 0 rgba(255, 255, 255, 0.28),
    inset -5px -5px 0 rgba(0, 0, 0, 0.12),
    2px 4px 0 color-mix(in srgb, #000000 24%, transparent);
}

.gacha-body {
  bottom: 7%;
  height: 39%;
  border-radius: 32px 26px 40px 34px;
  background:
    linear-gradient(90deg, color-mix(in srgb, #ffffff 13%, transparent) 0 7%, transparent 8%),
    linear-gradient(180deg, var(--mint-accent) 0 24%, color-mix(in srgb, var(--mint-accent) 70%, #000000) 24% 100%);
}

.gacha-panel-lines {
  position: absolute;
  inset: 12% 8% auto;
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 8px;
}

.gacha-panel-lines span {
  height: 9px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: color-mix(in srgb, #ffffff 22%, transparent);
}

.gacha-face {
  left: 13%;
  top: 34%;
}

.gacha-token-slot {
  position: absolute;
  left: 14%;
  bottom: 21%;
  width: 60px;
  height: 20px;
  border: 4px solid var(--ink);
  border-radius: 999px;
  background: color-mix(in srgb, var(--field) 86%, #000000);
  box-shadow: inset 0 6px 0 color-mix(in srgb, #000000 34%, transparent);
}

.sticker-burst {
  font-size: 0;
}

.sticker-burst::before {
  content: "";
  width: 36%;
  aspect-ratio: 1;
  border: 4px solid var(--ink);
  border-radius: 50%;
  background: color-mix(in srgb, var(--mint-accent) 72%, #ffffff);
  box-shadow:
    18px -6px 0 -8px var(--ink),
    -16px 10px 0 -9px var(--ink);
}

.gacha-crank {
  right: 11%;
  top: 33%;
  width: 76px;
}

.gacha-crank::before {
  content: "";
  position: absolute;
  inset: 19px;
  border: 4px solid var(--ink);
  border-radius: 50%;
  background: color-mix(in srgb, var(--mint-accent-tertiary) 75%, #ffffff);
}

.gacha-chute {
  width: 34%;
  height: 26%;
}

.gacha-output-ball {
  box-shadow:
    inset 5px 5px 0 rgba(255, 255, 255, 0.28),
    0 0 20px color-mix(in srgb, var(--mint-accent-secondary) 64%, transparent);
}

.claw-machine {
  background:
    radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--mint-accent-secondary) 30%, transparent), transparent 35%),
    linear-gradient(180deg, color-mix(in srgb, var(--field) 72%, var(--mint-accent-tertiary) 28%), var(--field));
}

.claw-sign {
  top: 18px;
  width: min(64%, 360px);
}

.claw-cabinet {
  inset: 15% 7% 23%;
  border-width: 6px;
  border-radius: 34px 26px 30px 24px;
  box-shadow:
    inset 13px 0 0 color-mix(in srgb, #ffffff 13%, transparent),
    inset 0 -16px 0 color-mix(in srgb, var(--field) 42%, transparent),
    0 0 0 8px color-mix(in srgb, var(--mint-accent) 18%, transparent),
    0 14px 0 color-mix(in srgb, #000000 16%, transparent);
}

.claw-cabinet::before {
  inset: 16px;
  border-style: dashed;
}

.claw-glass-shine {
  position: absolute;
  inset: -18% auto auto 12%;
  z-index: 3;
  width: 18%;
  height: 128%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.24);
  transform: rotate(18deg);
  pointer-events: none;
}

.claw-rail {
  height: 16px;
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, #ffffff 18%, transparent) 0 8px, transparent 8px 18px),
    var(--mint-accent-secondary);
}

.claw-arm {
  width: 84px;
  height: 160px;
}

.claw-cable {
  height: 100px;
}

.claw-hand {
  top: 92px;
  width: 78px;
}

.claw-hand::before {
  width: 34px;
  height: 24px;
  border-radius: 12px;
  box-shadow: inset 4px 4px 0 color-mix(in srgb, #ffffff 18%, transparent);
}

.claw-hand i {
  height: 42px;
  background: color-mix(in srgb, var(--mint-accent-secondary) 76%, #ffffff);
}

.claw-gift {
  border-radius: 10px 12px 8px 13px;
  box-shadow:
    inset 4px 4px 0 color-mix(in srgb, #ffffff 18%, transparent),
    4px 5px 0 color-mix(in srgb, #000000 30%, transparent);
}

.claw-gift::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -12px;
  width: 34px;
  height: 15px;
  border: 3px solid var(--ink);
  border-radius: 999px 999px 0 0;
  background: color-mix(in srgb, var(--mint-accent) 76%, #ffffff);
  transform: translateX(-50%);
}

.claw-control {
  width: min(76%, 440px);
  height: 84px;
  gap: clamp(14px, 4vw, 36px);
}

.claw-coin-slot {
  width: 58px;
  height: 20px;
  border: 4px solid var(--ink);
  border-radius: 999px;
  background: color-mix(in srgb, var(--field) 88%, #000000);
  box-shadow: inset 0 6px 0 color-mix(in srgb, #000000 34%, transparent);
}

.claw-score-display {
  display: grid;
  place-items: center;
  min-width: 54px;
  height: 34px;
  border: 4px solid var(--ink);
  border-radius: 8px;
  background: color-mix(in srgb, var(--field) 86%, #000000);
  color: var(--mint-accent-secondary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0;
  font-weight: 950;
  text-shadow: 0 0 8px var(--mint-accent-secondary);
  animation: vendingDisplayBlink 1.2s steps(2, end) infinite;
}

.claw-score-display::before {
  content: "";
  width: 34px;
  height: 12px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 8px 50%, var(--mint-accent-secondary) 0 4px, transparent 5px),
    radial-gradient(circle at 50% 50%, var(--mint-accent-tertiary) 0 4px, transparent 5px),
    radial-gradient(circle at calc(100% - 8px) 50%, var(--mint-accent-secondary) 0 4px, transparent 5px);
  filter: drop-shadow(0 0 7px var(--mint-accent-secondary));
}

.wheel-machine {
  background:
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--mint-accent-secondary) 30%, transparent), transparent 40%),
    radial-gradient(circle at 50% 18%, color-mix(in srgb, #ffffff 16%, transparent), transparent 28%),
    linear-gradient(180deg, color-mix(in srgb, var(--field) 70%, var(--mint-accent-tertiary) 30%), var(--field));
}

.wheel-sign {
  top: 18px;
  width: min(58%, 340px);
  min-height: clamp(44px, 5.8vw, 68px);
}

.wheel-stage-rays {
  position: absolute;
  inset: 8% 7% 14%;
  z-index: 1;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 8deg at 50% 45%, color-mix(in srgb, var(--mint-accent) 18%, transparent) 0deg 10deg, transparent 10deg 22deg);
  filter: blur(1px);
  animation: wheelRaysPulse 2.2s ease-in-out infinite;
}

.fortune-wheel {
  width: min(72%, 430px);
  border-width: 8px;
  box-shadow:
    inset 0 0 0 14px color-mix(in srgb, var(--field) 74%, transparent),
    inset 0 0 0 24px color-mix(in srgb, var(--ink) 18%, transparent),
    0 0 0 9px color-mix(in srgb, var(--mint-accent-secondary) 28%, transparent),
    11px 12px 0 color-mix(in srgb, #000000 34%, transparent);
}

.fortune-wheel::after {
  content: "";
  position: absolute;
  inset: 23%;
  border: 4px solid color-mix(in srgb, var(--ink) 72%, transparent);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.28) 0 13%, transparent 14%),
    color-mix(in srgb, var(--field) 76%, var(--mint-accent) 24%);
}

.fortune-wheel span {
  z-index: 2;
  color: color-mix(in srgb, var(--ink) 86%, #000000);
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.48);
}

.fortune-wheel .wheel-slice-mark {
  width: 22%;
  height: 8%;
  border: 3px solid color-mix(in srgb, var(--ink) 72%, transparent);
  border-radius: 999px;
  background:
    linear-gradient(90deg, color-mix(in srgb, #ffffff 36%, transparent), transparent 48%),
    color-mix(in srgb, var(--field) 78%, var(--mint-accent-secondary) 22%);
  font-size: 0;
  transform: rotate(var(--r)) translateY(-335%) translateX(-50%);
  transform-origin: 0 0;
}

.wheel-center {
  z-index: 4;
  width: 22%;
}

.wheel-pointer {
  top: 11%;
  border-left-width: 30px;
  border-right-width: 30px;
  border-top-width: 58px;
  filter:
    drop-shadow(0 4px 0 var(--ink))
    drop-shadow(0 0 12px color-mix(in srgb, var(--mint-accent-secondary) 60%, transparent));
}

.wheel-pointer::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -47px;
  width: 18px;
  height: 18px;
  border: 4px solid var(--ink);
  border-radius: 50%;
  background: var(--mint-accent);
  transform: translateX(-50%);
}

.wheel-stand {
  width: min(52%, 320px);
  height: 104px;
  border-radius: 36px 30px 18px 20px;
}

.wheel-stand i {
  position: absolute;
  left: 50%;
  bottom: 16px;
  width: 54%;
  height: 16px;
  border: 4px solid var(--ink);
  border-radius: 999px;
  background: color-mix(in srgb, var(--field) 80%, #000000);
  transform: translateX(-50%);
  box-shadow: inset 0 5px 0 color-mix(in srgb, #000000 28%, transparent);
}

.vending-machine {
  background:
    radial-gradient(circle at 52% 28%, color-mix(in srgb, var(--mint-accent) 34%, transparent), transparent 37%),
    radial-gradient(circle at 30% 78%, color-mix(in srgb, var(--mint-accent-secondary) 22%, transparent), transparent 30%),
    linear-gradient(180deg, color-mix(in srgb, var(--field) 80%, var(--mint-accent) 20%), var(--field));
}

.vending-sign {
  top: 18px;
  width: min(62%, 370px);
  min-height: clamp(46px, 6vw, 72px);
}

.vending-cabinet {
  width: min(82%, 500px);
  height: 75%;
  border-width: 7px;
  border-radius: 34px 24px 42px 28px;
  background:
    linear-gradient(105deg, color-mix(in srgb, #ffffff 14%, transparent) 0 14%, transparent 15%),
    linear-gradient(105deg, color-mix(in srgb, var(--mint-accent) 80%, #ffffff) 0 16%, var(--mint-accent) 17% 100%);
}

.vending-window {
  border-width: 6px;
  box-shadow:
    inset 0 0 0 5px color-mix(in srgb, #ffffff 12%, transparent),
    inset 0 -18px 0 color-mix(in srgb, #000000 18%, transparent);
}

.vending-glass-shine {
  position: absolute;
  inset: -16% auto auto 14%;
  z-index: 3;
  width: 20%;
  height: 132%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  transform: rotate(18deg);
  pointer-events: none;
}

.vending-shelves {
  position: absolute;
  inset: 17% 7%;
  z-index: 1;
  display: grid;
  align-content: space-between;
  pointer-events: none;
}

.vending-shelves span {
  height: 5px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: color-mix(in srgb, var(--mint-accent-secondary) 74%, #ffffff);
  box-shadow: 0 5px 0 color-mix(in srgb, #000000 18%, transparent);
}

.vending-prize-wall {
  z-index: 2;
}

.vending-prize {
  box-shadow:
    inset 4px 4px 0 color-mix(in srgb, #ffffff 18%, transparent),
    4px 5px 0 color-mix(in srgb, #000000 30%, transparent);
}

.vending-question {
  z-index: 2;
  width: min(46%, 170px);
  aspect-ratio: 0.78;
  border-radius: 58% 42% 45% 55% / 52% 46% 54% 48%;
  background:
    radial-gradient(circle at 35% 26%, color-mix(in srgb, #ffffff 26%, transparent) 0 12%, transparent 13%),
    color-mix(in srgb, var(--mint-accent-secondary) 70%, var(--mint-accent));
  opacity: 0.58;
  text-shadow:
    5px 5px 0 color-mix(in srgb, #000000 28%, transparent),
    0 0 24px color-mix(in srgb, var(--mint-accent-secondary) 60%, transparent);
  font-size: 0;
  box-shadow:
    inset -18px -20px 0 color-mix(in srgb, #000000 12%, transparent),
    0 0 24px color-mix(in srgb, var(--mint-accent-secondary) 44%, transparent);
}

.vending-display {
  min-height: 72px;
  letter-spacing: 1px;
}

.vending-display span {
  display: block;
  width: 70%;
  height: 18px;
  border-radius: 999px;
  background:
    repeating-linear-gradient(90deg, var(--mint-accent-secondary) 0 8px, transparent 8px 14px);
  filter: drop-shadow(0 0 8px var(--mint-accent-secondary));
}

.vending-control > span:not(.vending-knob) {
  min-height: 82px;
  border-width: 5px;
  font-size: 0;
  position: relative;
}

.vending-control > span:not(.vending-knob)::before {
  content: "";
  width: 46%;
  aspect-ratio: 1;
  border: 4px solid var(--ink);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, color-mix(in srgb, #ffffff 35%, transparent) 0 12%, transparent 13%),
    var(--mint-accent-tertiary);
  box-shadow: 4px 4px 0 color-mix(in srgb, #000000 24%, transparent);
}

.vending-control > span:not(.vending-knob):nth-child(2)::before {
  background:
    radial-gradient(circle at 32% 28%, color-mix(in srgb, #ffffff 35%, transparent) 0 12%, transparent 13%),
    var(--mint-accent-secondary);
}

.vending-knob {
  width: 62px;
}

.vending-coin-return {
  justify-self: center;
  width: 82px;
  height: 20px;
  border: 4px solid var(--ink);
  border-radius: 999px;
  background: color-mix(in srgb, var(--field) 86%, #000000);
  box-shadow: inset 0 6px 0 color-mix(in srgb, #000000 34%, transparent);
}

.vending-slot {
  box-shadow:
    inset 0 10px 0 color-mix(in srgb, #000000 34%, transparent),
    0 0 12px color-mix(in srgb, var(--mint-accent-secondary) 38%, transparent);
}

.draw-page-description-card {
  grid-column: 1 / -1;
  border: 2px solid color-mix(in srgb, var(--ink) 72%, transparent);
  border-radius: 10px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--mint-accent-secondary) 10%, transparent), transparent 46%),
    color-mix(in srgb, var(--field) 88%, transparent);
  box-shadow: 6px 6px 0 var(--mint-accent-tertiary);
  padding: clamp(16px, 2vw, 24px);
}

.draw-page-description-rich {
  color: var(--text);
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 760;
  line-height: var(--description-line-height, 1.35);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.draw-counter-panel {
  display: grid;
  align-content: center;
  gap: 16px;
  min-width: 0;
  border: 3px solid var(--ink);
  border-radius: 12px;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--field) 90%, var(--mint-accent) 10%), var(--field)),
    var(--field);
  padding: clamp(16px, 2.4vw, 26px);
  box-shadow:
    inset 0 0 0 3px color-mix(in srgb, var(--mint-accent-secondary) 24%, transparent),
    8px 8px 0 var(--mint-accent-secondary);
}

.draw-counter-panel h2 {
  margin: 2px 0 0;
  font-size: clamp(62px, 9vw, 118px);
  line-height: 0.84;
}

.draw-counter-panel span,
.draw-counter-copy {
  color: var(--muted);
  font-size: clamp(15px, 1.6vw, 20px);
  font-weight: 850;
  line-height: 1.25;
}

.draw-stage-stats {
  grid-template-columns: 1fr;
}

.draw-stage-stats div {
  border-color: color-mix(in srgb, var(--mint-accent-secondary) 44%, var(--ink));
}

.draw-stage-actions,
.edition-mint-actions.draw-stage-actions {
  grid-template-columns: 1fr;
}

.draw-stage-actions .primary-action {
  width: 100%;
  min-width: 0;
  min-height: 62px;
  background: var(--mint-accent);
  color: var(--mint-accent-contrast);
  box-shadow: 5px 5px 0 var(--mint-accent-secondary), 9px 9px 0 var(--mint-accent-tertiary);
  padding: 8px 12px;
  font-size: clamp(18px, 2.4vw, 32px);
  white-space: normal;
  text-transform: uppercase;
}

.draw-stage.is-drawing .draw-stage-actions .primary-action {
  animation: drawButtonPulse 0.7s ease-in-out infinite;
}

.draw-mint-body .edition-mint-shell {
  --draw-rail-gutter: clamp(96px, 7vw, 132px);
  width: min(calc(100% - var(--draw-rail-gutter)), 1400px);
  padding: clamp(72px, 5vw, 88px) clamp(10px, 2vw, 24px) clamp(10px, 2vw, 24px);
}

.draw-mint-body .edition-mint-shell,
.draw-mint-body .edition-mint-shell *,
.draw-mint-body .edition-mint-shell *::before,
.draw-mint-body .edition-mint-shell *::after {
  box-sizing: border-box;
}

.draw-mint-body .edition-mint-banner {
  min-height: clamp(116px, 13vw, 182px);
  margin-bottom: clamp(12px, 1.6vw, 22px);
  border: 3px solid var(--ink);
  border-radius: 10px;
  box-shadow: 8px 8px 0 var(--mint-accent);
}

.draw-mint-body .mint-top-actions {
  z-index: 90;
  top: clamp(8px, 1vw, 14px);
  right: clamp(14px, 2vw, 28px);
  gap: 6px;
  max-width: min(260px, calc(100vw - 28px));
}

.draw-mint-body .mint-top-wallet {
  border: 2px solid color-mix(in srgb, #fffdf8 54%, transparent);
  background: rgba(17, 20, 22, 0.88);
  color: #fffdf8;
  padding: 7px 13px;
  font-size: 14px;
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--mint-accent) 64%, #151111);
}

.draw-mint-body .mint-top-action {
  min-height: 44px;
  border: 2px solid var(--mint-accent);
  background: rgba(17, 20, 22, 0.92);
  color: #fffdf8;
  padding: 0 18px;
  font-size: clamp(14px, 1.15vw, 17px);
  box-shadow:
    3px 3px 0 color-mix(in srgb, var(--mint-accent) 74%, #151111),
    5px 5px 0 rgba(0, 0, 0, 0.45);
}

.draw-mint-body .edition-opensea-link {
  display: none;
}

.draw-machine-grid {
  grid-template-columns: minmax(0, 1fr);
}

.draw-stage,
.draw-mint-body .draw-stage {
  --draw-tile-height: clamp(560px, calc(100dvh - 250px), 760px);
  width: min(100%, 1180px);
  max-width: 1180px;
  margin-inline: auto;
  grid-template-columns: minmax(0, 1.14fr) minmax(320px, 0.86fr);
  gap: clamp(14px, 2vw, 26px);
  align-items: stretch;
  height: var(--draw-tile-height);
  min-height: var(--draw-tile-height);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  padding: 0;
}

.draw-machine-panel {
  position: relative;
  min-height: 0;
  min-width: 0;
}

.draw-machine-panel .frame-grab-machine {
  width: 100%;
  height: var(--draw-tile-height);
  min-height: 0;
  overflow: hidden;
  border: 0;
  border-radius: 10px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--mint-accent-tertiary) 14%, transparent), transparent 48%),
    linear-gradient(315deg, color-mix(in srgb, var(--mint-accent) 10%, transparent), transparent 52%),
    linear-gradient(90deg, color-mix(in srgb, var(--mint-accent) 18%, transparent) 1px, transparent 1px),
    linear-gradient(180deg, color-mix(in srgb, var(--mint-accent-tertiary) 16%, transparent) 1px, transparent 1px),
    color-mix(in srgb, var(--mint-accent-tertiary) 38%, #07131e);
  background-size: auto, auto, 28px 28px, 28px 28px, auto;
  box-shadow: 8px 8px 0 color-mix(in srgb, var(--mint-accent-tertiary) 88%, var(--mint-accent) 12%);
}

.edition-mint-body.draw-mint-body[data-draw-skin="frame-grab"]:not([data-edition-theme="dark"]) .draw-machine-panel .frame-grab-machine {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--mint-accent-secondary) 20%, transparent), transparent 44%),
    linear-gradient(315deg, color-mix(in srgb, var(--mint-accent) 14%, transparent), transparent 50%),
    linear-gradient(90deg, color-mix(in srgb, var(--mint-accent) 20%, transparent) 1px, transparent 1px),
    linear-gradient(180deg, color-mix(in srgb, var(--mint-accent-tertiary) 18%, transparent) 1px, transparent 1px),
    color-mix(in srgb, var(--mint-accent-secondary) 38%, #10232a);
  background-size: auto, auto, 28px 28px, 28px 28px, auto;
  box-shadow: 8px 8px 0 color-mix(in srgb, var(--mint-accent-tertiary) 88%, var(--mint-accent) 12%);
}

.draw-machine-panel .frame-grab-machine::before {
  border: 0;
  background: none;
}

.edition-mint-body.draw-mint-body[data-draw-skin="frame-grab"]:not([data-edition-theme="dark"]) .draw-machine-panel .draw-frame-grab-canvas {
  filter: none;
}

.draw-machine-panel .draw-frame-grab-canvas {
  width: auto;
  height: min(calc(var(--draw-tile-height) - 10px), 750px);
  min-height: 0;
  max-width: calc(100% - 12px);
  max-height: calc(100% - 12px);
  aspect-ratio: 720 / 1000;
  filter: none;
}

.draw-machine-os {
  position: absolute;
  top: clamp(14px, 1.6vw, 20px);
  right: clamp(14px, 1.6vw, 20px);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid color-mix(in srgb, #fffdf8 24%, transparent);
  border-radius: 999px;
  background: rgba(12, 14, 17, 0.74);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(8px);
}

.draw-machine-os:hover,
.draw-machine-os:focus-visible {
  outline: none;
  transform: translateY(-1px);
  border-color: var(--mint-accent);
}

.draw-machine-os .mint-opensea-icon {
  width: 28px;
  height: 28px;
}

.draw-counter-panel {
  position: relative;
  align-content: stretch;
  gap: clamp(9px, 1.1vw, 14px);
  min-height: 0;
  min-width: 0;
  height: var(--draw-tile-height);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, #fffdf8 18%, transparent);
  border-radius: 12px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--mint-accent-secondary) 10%, transparent), transparent 36%),
    linear-gradient(315deg, color-mix(in srgb, var(--mint-accent-tertiary) 12%, transparent), transparent 42%),
    color-mix(in srgb, var(--mint-accent) 32%, #1e242a);
  color: #fffdf8;
  padding: clamp(14px, 1.6vw, 22px);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, #fffdf8 5%, transparent),
    8px 8px 0 var(--mint-accent-secondary);
  --panel: #1e242a;
  --field: #101519;
  --text: #fffdf8;
  --muted: #c6ccd2;
  --line: #3a434c;
  --mint-success: var(--mint-accent);
  --mint-success-contrast: var(--mint-accent-contrast);
}

.draw-counter-panel > :not(.draw-counter-os) {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.draw-counter-os {
  position: absolute;
  top: clamp(14px, 1.6vw, 20px);
  right: clamp(64px, 5vw, 82px);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid color-mix(in srgb, #fffdf8 24%, transparent);
  border-radius: 999px;
  background: rgba(12, 14, 17, 0.74);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(8px);
}

.draw-counter-os:hover,
.draw-counter-os:focus-visible {
  outline: none;
  transform: translateY(-1px);
  border-color: var(--mint-accent);
}

.draw-counter-os .mint-opensea-icon {
  width: 28px;
  height: 28px;
}

.draw-counter-panel .draw-live-header {
  padding-right: clamp(112px, 8vw, 132px);
}

.draw-counter-panel .mint-phase-badge {
  min-height: 34px;
  border: 0;
  background: var(--mint-accent-secondary);
  color: var(--mint-accent-secondary-contrast);
  padding: 0 14px;
  font-size: clamp(13px, 1.1vw, 16px);
}

.draw-counter-panel .mint-countdown-label {
  color: #fffdf8;
  font-size: clamp(18px, 1.6vw, 28px);
}

.draw-counter-panel .mint-countdown-time {
  color: var(--mint-accent);
  display: block;
  width: max-content;
  max-width: 100%;
  overflow: visible;
  white-space: nowrap;
  font-size: clamp(38px, 4vw, 76px);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-shadow: 4px 4px 0 var(--mint-accent-secondary);
}

.draw-counter-panel.is-word-clock .mint-countdown-time {
  font-size: clamp(46px, 4.4vw, 64px);
  letter-spacing: 0;
}

.draw-counter-panel.is-word-clock .mint-countdown-label {
  font-size: clamp(17px, 1.3vw, 22px);
}

.draw-counter-panel .mint-supply-progress {
  margin-top: 0;
}

.draw-counter-panel .mint-supply-progress-copy strong {
  color: #fffdf8;
  font-size: clamp(16px, 1.4vw, 22px);
}

.draw-counter-panel .mint-supply-progress-copy span {
  color: #c6ccd2;
  font-size: clamp(13px, 1.1vw, 16px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.draw-counter-panel .mint-progress-track {
  height: 12px;
  border-color: #38424c;
  background: #101519;
}

.draw-live-phase-card.mint-phase-item {
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #11171d;
  gap: 7px 10px;
  padding: clamp(10px, 1vw, 14px);
  min-width: 0;
  overflow: hidden;
}

.draw-live-phase-card .mint-phase-main strong {
  color: #fffdf8;
  font-size: clamp(17px, 1.45vw, 22px);
}

.draw-live-phase-card .mint-phase-main span,
.draw-live-phase-card .mint-phase-time,
.draw-live-phase-card .local-time-note {
  color: #c6ccd2;
  font-size: clamp(12px, 1vw, 14px);
  font-weight: 500;
}

.draw-live-phase-card .draw-phase-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: baseline;
}

.draw-live-phase-card .mint-phase-main .draw-phase-price {
  color: color-mix(in srgb, var(--mint-accent-secondary) 76%, #fffdf8);
  font-weight: 650;
  text-shadow: 0 0 12px color-mix(in srgb, var(--mint-accent-secondary) 26%, transparent);
}

.draw-live-phase-card .mint-calendar-button {
  max-width: min(190px, 100%);
  min-height: 40px;
  overflow: hidden;
  padding: 0 14px;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.draw-live-phase-card .mint-phase-eligibility {
  max-width: 100%;
  min-height: 24px;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
}

.draw-live-phase-card .mint-phase-eligibility.is-not-eligible {
  border-color: color-mix(in srgb, var(--mint-accent) 84%, #fffdf8);
  color: color-mix(in srgb, var(--mint-accent) 72%, #fffdf8);
}

.draw-live-phase-card .mint-phase-eligibility.is-not-eligible .mint-phase-eligibility-mark {
  border-color: var(--mint-accent);
  background: transparent;
  color: color-mix(in srgb, var(--mint-accent) 80%, #fffdf8);
}

.draw-live-phase-card .mint-phase-eligibility.is-minted-all {
  border-color: #767d84;
  color: #b8c0c8;
}

.draw-live-phase-card .mint-phase-eligibility.is-minted-all .mint-phase-eligibility-mark {
  border-color: #98a1aa;
  background: transparent;
  color: #b8c0c8;
}

.draw-live-phase-card .mint-phase-eligibility.is-minted-all .mint-phase-eligibility-mark::before {
  content: "\2713";
}

.draw-live-phase-card .mint-phase-state,
.draw-live-phase-card .mint-phase-actions {
  max-width: 100%;
  min-width: 0;
}

.draw-stage-stats,
.edition-mint-stats.draw-stage-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.draw-mint-body .draw-stage-stats,
.draw-mint-body .edition-mint-stats.draw-stage-stats {
  display: none;
}

.draw-stage-stats div {
  border: 0;
  background: #11171d;
  color: #fffdf8;
}

.draw-stage-stats dt {
  color: #c6ccd2;
}

.draw-stage-stats dd {
  color: #fffdf8;
  font-size: clamp(16px, 1.35vw, 21px);
}

.draw-mint-controls {
  display: grid;
  gap: clamp(12px, 1.3vw, 18px);
  align-self: end;
}

.draw-local-time-disclaimer {
  margin: 0;
  color: #c6ccd2;
  font-size: clamp(12px, 1vw, 14px);
  font-weight: 500;
  line-height: 1.35;
}

.draw-mint-button-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

.draw-wallet-button,
.draw-mint-controls .primary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 50px;
  border: 2px solid #fffdf8;
  border-radius: 8px;
  padding: 0 14px;
  font-size: clamp(16px, 1.4vw, 22px);
  font-weight: 950;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  box-shadow: 6px 6px 0 rgba(255, 253, 248, 0.72);
  white-space: nowrap;
}

.draw-wallet-button {
  background: var(--mint-accent-secondary);
  color: var(--mint-accent-secondary-contrast);
  cursor: pointer;
}

.draw-wallet-button:disabled {
  cursor: default;
}

.draw-mint-controls .primary-action {
  background: var(--mint-accent);
  color: var(--mint-accent-contrast);
}

.draw-mint-controls .primary-action:disabled,
.draw-wallet-button:disabled {
  border-color: color-mix(in srgb, #fffdf8 48%, #606a73);
  background: color-mix(in srgb, #20262c 70%, #606a73);
  color: color-mix(in srgb, #c6ccd2 86%, #fffdf8);
  box-shadow: none;
}

.draw-mint-ready-status {
  margin: 0;
  color: #c6ccd2;
  font-size: clamp(13px, 1.1vw, 15px);
  font-weight: 850;
  line-height: 1.35;
}

.draw-prize-output {
  display: grid;
  gap: 10px;
}

.draw-prize-card {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 3px solid var(--rarity-color, var(--ink));
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
  padding: 8px;
  box-shadow: 4px 4px 0 color-mix(in srgb, var(--rarity-color, var(--mint-accent)) 64%, var(--ink));
  opacity: 0;
  transform: translateY(18px) scale(0.94);
  animation: drawPrizeCardPop 0.62s cubic-bezier(0.2, 1.4, 0.48, 1) forwards;
  animation-delay: calc(var(--i) * 0.08s);
}

.draw-prize-media {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--field);
}

.draw-prize-media img,
.draw-prize-media video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.draw-prize-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.draw-prize-copy strong {
  color: var(--mint-accent);
  font-size: clamp(16px, 1.7vw, 22px);
  overflow-wrap: anywhere;
}

.draw-prize-copy span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.draw-prize-copy .draw-prize-probability {
  justify-self: start;
  color: color-mix(in srgb, var(--rarity-color, var(--mint-accent)) 86%, var(--text));
  border: 2px solid var(--rarity-color, var(--mint-accent));
  border-radius: 999px;
  padding: 3px 8px;
  background: color-mix(in srgb, var(--rarity-color, var(--mint-accent)) 16%, transparent);
  font-size: 12px;
  text-transform: uppercase;
}

.draw-reveal-modal {
  z-index: 235;
}

.draw-reveal-panel {
  width: min(100%, 1080px);
  border: 4px solid #151111;
  border-radius: 18px;
  background: #fffaf1;
  color: #151111;
  box-shadow: 12px 12px 0 var(--mint-accent-tertiary), 18px 18px 0 #151111;
  text-align: left;
}

.draw-reveal-cards {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  width: 100%;
  margin: 6px auto 18px;
}

.draw-reveal-cards[data-count="1"] {
  grid-template-columns: 1fr;
}

.draw-reveal-card {
  display: grid;
  gap: 10px;
  align-content: start;
  min-width: 0;
  border: 3px solid var(--rarity-color, var(--mint-accent));
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 6px 6px 0 color-mix(in srgb, var(--rarity-color, var(--mint-accent)) 62%, var(--ink));
  padding: 10px;
  opacity: 0;
  transform: translateY(20px) scale(0.94);
  animation: drawPrizeCardPop 0.62s cubic-bezier(0.2, 1.4, 0.48, 1) forwards;
  animation-delay: calc(var(--i) * 0.08s);
}

.draw-reveal-cards[data-count="1"] .draw-reveal-card {
  grid-template-columns: minmax(220px, 42%) minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 4vw, 42px);
  min-height: clamp(280px, 42vw, 470px);
  border-color: #151111;
  box-shadow: 7px 7px 0 var(--mint-accent-tertiary);
}

.draw-reveal-media {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  overflow: hidden;
  border: 3px solid #151111;
  border-radius: 8px;
  background: var(--field);
}

.draw-reveal-media img,
.draw-reveal-media video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.draw-reveal-copy {
  display: grid;
  justify-items: start;
  gap: 8px;
  min-width: 0;
}

.draw-reveal-copy strong {
  color: #151111;
  font-size: clamp(36px, 6vw, 78px);
  font-weight: 950;
  line-height: 0.96;
  overflow-wrap: anywhere;
  text-align: left;
  text-transform: uppercase;
}

.draw-reveal-copy span {
  color: #756d66;
  font-size: clamp(16px, 1.8vw, 24px);
  font-weight: 850;
}

.draw-reveal-copy .draw-prize-probability {
  border: 2px solid var(--rarity-color, var(--mint-accent));
  border-radius: 999px;
  background: color-mix(in srgb, var(--rarity-color, var(--mint-accent)) 16%, transparent);
  color: color-mix(in srgb, var(--rarity-color, var(--mint-accent)) 76%, #151111);
  padding: 6px 12px;
  font-size: clamp(13px, 1.2vw, 16px);
  text-transform: uppercase;
}

.draw-reveal-cards:not([data-count="1"]) .draw-reveal-copy {
  justify-items: center;
}

.draw-reveal-cards:not([data-count="1"]) .draw-reveal-copy strong {
  color: var(--mint-accent);
  font-size: clamp(18px, 2.2vw, 28px);
  text-align: center;
}

.draw-reveal-cards:not([data-count="1"]) .draw-reveal-copy span {
  color: var(--muted);
  font-size: 13px;
}

.draw-reveal-panel .mint-confirmation-kicker {
  text-align: center;
}

.draw-reveal-panel h2,
.draw-reveal-panel .mint-confirmation-message,
.draw-reveal-panel .mint-confirmation-note {
  color: #151111;
  text-align: center;
}

.draw-reveal-panel .mint-confirmation-note {
  color: #5f5852;
}

.draw-reveal-panel .mint-confirmation-actions {
  text-align: center;
}

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

.draw-probability-item {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 3px solid var(--rarity-color, var(--mint-accent));
  border-radius: 12px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--rarity-color, var(--mint-accent)) 15%, transparent), transparent 62%),
    color-mix(in srgb, var(--panel) 90%, var(--field) 10%);
  color: var(--text);
  padding: 8px;
  box-shadow: 4px 4px 0 color-mix(in srgb, var(--rarity-color, var(--mint-accent)) 54%, var(--ink));
}

.draw-probability-item.is-empty {
  opacity: 0.62;
}

.draw-probability-item.is-minted-out {
  opacity: 0.52;
  filter: grayscale(0.24);
}

.draw-probability-thumb {
  display: grid;
  place-items: center;
  width: 70px;
  aspect-ratio: 1;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--field);
}

.draw-probability-thumb img,
.draw-probability-thumb video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.draw-probability-thumb audio {
  max-width: 100%;
}

.draw-probability-thumb .edition-media-placeholder {
  width: 100%;
  height: 100%;
  font-size: 13px;
}

.draw-probability-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.draw-probability-copy strong {
  color: var(--text);
  font-size: 16px;
  font-weight: 950;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.draw-probability-copy span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.15;
}

.draw-probability-copy em {
  justify-self: start;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: color-mix(in srgb, var(--field) 72%, var(--muted));
  color: var(--muted);
  padding: 2px 7px;
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.draw-probability-value {
  color: #fffdf8;
  background: #111416;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 14px;
  font-weight: 950;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.72);
  box-shadow: 2px 2px 0 var(--rarity-color, var(--mint-accent));
}

@keyframes drawMachineIdle {
  0%, 100% { transform: translateY(0) rotate(-0.2deg); }
  50% { transform: translateY(-4px) rotate(0.2deg); }
}

@keyframes drawMachineDrawing {
  0%, 100% { transform: translate(0, 0) rotate(-0.7deg); }
  25% { transform: translate(3px, -2px) rotate(0.9deg); }
  50% { transform: translate(-2px, 2px) rotate(-0.9deg); }
  75% { transform: translate(2px, 1px) rotate(0.7deg); }
}

@keyframes sketchBulbBlink {
  0%, 100% { opacity: 0.72; transform: scale(0.94); }
  50% { opacity: 1; transform: scale(1.18); }
}

@keyframes sketchBallJiggle {
  0%, 100% { transform: translate(0, 0) rotate(-1deg); }
  38% { transform: translate(5px, -7px) rotate(11deg); }
  72% { transform: translate(-5px, 4px) rotate(-9deg); }
}

@keyframes sketchClawRoam {
  0%, 100% { transform: translate(-42px, 0) rotate(-1deg); }
  50% { transform: translate(48px, 0) rotate(1deg); }
}

@keyframes sketchClawDive {
  0%, 100% { transform: translate(-32px, 0) rotate(-1deg); }
  34% { transform: translate(54px, 0) rotate(1deg); }
  66% { transform: translate(54px, 82px) rotate(0deg); }
}

@keyframes sketchWheelIdle {
  to { transform: rotate(360deg); }
}

@keyframes sketchWheelFast {
  to { transform: rotate(720deg); }
}

@keyframes sketchWheelSettle {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(1160deg); }
}

@keyframes sketchPrizeWiggle {
  0%, 100% { transform: translate(0, 0) rotate(-1deg); }
  45% { transform: translate(4px, -5px) rotate(4deg); }
  75% { transform: translate(-3px, 3px) rotate(-3deg); }
}

@keyframes sketchAmbientTwinkle {
  0%, 100% { opacity: 0.32; transform: scale(0.72) rotate(-6deg); }
  45% { opacity: 0.92; transform: scale(1.08) rotate(7deg); }
  72% { opacity: 0.58; transform: scale(0.88) rotate(-3deg); }
}

@keyframes sketchGachaTumble {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  18% { transform: translate(14px, -13px) rotate(64deg); }
  39% { transform: translate(-12px, -4px) rotate(143deg); }
  62% { transform: translate(9px, 12px) rotate(236deg); }
  82% { transform: translate(-7px, 5px) rotate(315deg); }
}

@keyframes sketchGearSpin {
  to { transform: rotate(360deg); }
}

@keyframes sketchClawGrab {
  0%, 100% { transform: translate(-58px, -2px) rotate(-1deg); }
  22% { transform: translate(48px, -4px) rotate(1deg); }
  42% { transform: translate(48px, 92px) rotate(0deg); }
  57% { transform: translate(48px, 92px) rotate(0deg) scaleY(1.05); }
  76% { transform: translate(-18px, 30px) rotate(-2deg); }
}

@keyframes sketchPrizeRattle {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(6px, -7px) rotate(7deg); }
  52% { transform: translate(-5px, 4px) rotate(-6deg); }
  78% { transform: translate(3px, -3px) rotate(3deg); }
}

@keyframes sketchCoinToss {
  0%, 100% { transform: translate(0, 0) rotate(-10deg) scale(1); opacity: 0.86; }
  38% { transform: translate(10px, -24px) rotate(76deg) scale(1.05); opacity: 1; }
  68% { transform: translate(-6px, 8px) rotate(148deg) scale(0.96); opacity: 0.9; }
}

@keyframes sketchPipePulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.26) saturate(1.18); }
}

@keyframes sketchOutputPop {
  0% { opacity: 0; transform: translateY(26px) scale(0.58) rotate(-8deg); }
  60% { opacity: 1; transform: translateY(-18px) scale(1.08) rotate(6deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
}

@keyframes drawMachineAuraPulse {
  0%, 100% { opacity: 0.58; transform: scale(0.98) rotate(-2deg); }
  50% { opacity: 0.9; transform: scale(1.04) rotate(2deg); }
}

@keyframes drawSparklePop {
  0%, 100% { opacity: 0.28; transform: scale(0.65) rotate(0deg); }
  42% { opacity: 1; transform: scale(1.18) rotate(14deg); }
  68% { opacity: 0.55; transform: scale(0.92) rotate(-8deg); }
}

@keyframes drawBulbPulse {
  0%, 100% { filter: brightness(1); transform: scale(1); }
  50% { filter: brightness(1.65); transform: scale(1.15); }
}

@keyframes stickerTwinkle {
  0%, 100% { filter: brightness(1); transform: rotate(0deg) scale(1); }
  50% { filter: brightness(1.35); transform: rotate(6deg) scale(1.08); }
}

@keyframes gachaBallWiggle {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  40% { transform: translate(5px, -7px) rotate(14deg); }
  70% { transform: translate(-6px, 5px) rotate(-11deg); }
}

@keyframes gachaDomeBreathe {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.015); }
}

@keyframes drawBlink {
  0%, 92%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(0.15); }
}

@keyframes gachaCrankIdle {
  0%, 100% { transform: rotate(-8deg); }
  50% { transform: rotate(10deg); }
}

@keyframes gachaCrankSpin {
  to { transform: rotate(360deg); }
}

@keyframes drawPrizeSpit {
  0% { opacity: 0; transform: translate(-50%, 40px) scale(0.6) rotate(-12deg); }
  55% { opacity: 1; transform: translate(-50%, -42px) scale(1.1) rotate(8deg); }
  100% { opacity: 1; transform: translate(-50%, -12px) scale(1) rotate(0deg); }
}

@keyframes clawRoam {
  0%, 100% { transform: translateX(-32px); }
  50% { transform: translateX(46px); }
}

@keyframes clawDive {
  0%, 100% { transform: translate(0, 0); }
  35% { transform: translate(54px, 0); }
  68% { transform: translate(54px, 90px); }
}

@keyframes giftWiggle {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-4px) rotate(2deg); }
}

@keyframes clawJoystick {
  0%, 100% { transform: rotate(-10deg); }
  50% { transform: rotate(12deg); }
}

@keyframes wheelIdle {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes wheelFast {
  to { transform: translate(-50%, -50%) rotate(720deg); }
}

@keyframes wheelSettle {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(1360deg); }
}

@keyframes wheelBulbOrbit {
  to { transform: rotate(360deg); }
}

@keyframes wheelRaysPulse {
  0%, 100% { opacity: 0.48; transform: scale(0.98) rotate(0deg); }
  50% { opacity: 0.88; transform: scale(1.03) rotate(4deg); }
}

@keyframes vendingPrizeWiggle {
  0%, 100% { transform: translate(0, 0) rotate(-2deg); }
  45% { transform: translate(4px, -6px) rotate(5deg); }
  75% { transform: translate(-4px, 4px) rotate(-4deg); }
}

@keyframes vendingDisplayBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.72; }
}

@keyframes vendingButtonGlow {
  0%, 100% { filter: brightness(1); transform: translate(0, 0); }
  50% { filter: brightness(1.2); transform: translate(1px, 1px); }
}

@keyframes vendingKnobIdle {
  0%, 100% { transform: rotate(-8deg); }
  50% { transform: rotate(9deg); }
}

@keyframes vendingKnobSpin {
  to { transform: rotate(360deg); }
}

@keyframes drawButtonPulse {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(2px, 2px); }
}

@keyframes drawPrizeCardPop {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.draw-machine-card {
  grid-column: 1 / -1;
}

.draw-machine-card .edition-mint-card-copy {
  gap: 16px;
  padding: 18px;
}

.draw-machine-card .primary-action {
  min-height: 64px;
  font-size: 32px;
  text-transform: uppercase;
}

.draw-result-panel {
  display: grid;
  gap: 4px;
  border: 3px solid var(--ink);
  border-radius: 6px;
  padding: 12px;
  background: var(--field);
  color: var(--text);
}

.draw-result-panel strong {
  color: var(--pink);
  font-size: 22px;
}

.edition-mint-banner {
  display: grid;
  position: relative;
  min-height: clamp(140px, 20vw, 250px);
  margin-bottom: clamp(14px, 2vw, 22px);
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background:
    linear-gradient(135deg, var(--mint-accent) 0%, var(--mint-accent-secondary) 46%, var(--mint-accent-tertiary) 100%);
}

.edition-mint-banner.has-media {
  background: var(--panel-2);
}

.edition-mint-banner-slot {
  position: absolute;
  inset: 0;
  display: block;
  z-index: 0;
}

.edition-mint-banner-media {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  filter: none;
}

.edition-mint-banner::before,
.edition-mint-banner::after {
  content: none;
}

.edition-mint-header {
  display: grid;
  gap: clamp(14px, 2vw, 22px);
  margin-bottom: clamp(16px, 2.2vw, 26px);
}

.edition-mint-titlebar,
.edition-countdown-panel,
.edition-description-card {
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--panel);
}

.edition-mint-titlebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(14px, 2vw, 24px);
  align-items: start;
  padding: clamp(16px, 2.4vw, 28px);
}

.edition-mint-identity {
  display: flex;
  gap: clamp(14px, 2vw, 24px);
  align-items: center;
  min-width: 0;
}

.edition-mint-title-copy {
  min-width: 0;
}

.edition-mint-logo {
  flex: 0 0 auto;
  width: clamp(68px, 8vw, 104px);
  height: clamp(68px, 8vw, 104px);
  border: 2px solid var(--ink);
  border-radius: 8px;
  object-fit: cover;
  background: var(--field);
}

.edition-mint-logo[hidden] {
  display: none;
}

.edition-mint-header h1 {
  margin: 4px 0 8px;
  color: var(--mint-accent);
  font-size: clamp(44px, 7vw, 88px);
  line-height: 0.94;
  overflow-wrap: anywhere;
}

.edition-phase-summary {
  margin: 0;
  color: var(--muted);
  font-size: clamp(15px, 1.5vw, 20px);
  font-weight: 950;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.edition-calendar-action {
  align-self: start;
  white-space: nowrap;
}

.edition-countdown-panel {
  display: grid;
  gap: 12px;
  padding: clamp(16px, 2.4vw, 28px);
}

.edition-phase-countdown {
  display: grid;
  gap: 4px;
  border: 0;
  padding: 0;
  background: transparent;
}

.edition-phase-countdown .mint-countdown-label {
  color: var(--text);
}

.edition-phase-countdown .mint-countdown-time {
  color: var(--mint-accent-tertiary);
}

.edition-phase-lines {
  display: grid;
  gap: 0;
}

.edition-phase-line {
  display: grid;
  grid-template-columns: minmax(82px, auto) minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  margin: 0;
  border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  padding: 9px 0 0;
  color: var(--muted);
  font-size: clamp(14px, 1.35vw, 18px);
  font-weight: 850;
  line-height: 1.3;
}

.edition-phase-line strong {
  color: var(--text);
  font-weight: 950;
  text-transform: uppercase;
}

.edition-phase-line.is-live strong,
.edition-phase-line.is-live span {
  color: var(--mint-success);
}

.edition-phase-line.is-upcoming strong {
  color: var(--mint-accent-secondary);
}

.edition-phase-line.is-upcoming span {
  color: color-mix(in srgb, var(--mint-accent-secondary) 72%, var(--text));
}

.edition-phase-line.is-ended strong {
  color: var(--mint-accent-tertiary);
}

.edition-phase-line span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.edition-drawer-layer {
  position: fixed;
  inset: 0;
  z-index: 25;
  pointer-events: none;
}

.edition-side-rail {
  position: fixed;
  top: 50%;
  right: 0;
  display: grid;
  gap: 10px;
  transform: translateY(-50%);
  pointer-events: auto;
}

.edition-side-rail button {
  min-height: 118px;
  border: 2px solid var(--ink);
  border-right: 0;
  border-radius: 8px 0 0 8px;
  background: var(--field);
  color: var(--text);
  padding: 12px 8px;
  box-shadow: -5px 5px 0 var(--mint-accent);
  cursor: pointer;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}

.edition-side-rail button[aria-expanded="true"] {
  background: var(--ink);
  color: var(--panel);
  box-shadow: -5px 5px 0 var(--mint-accent);
}

.edition-slide-drawer {
  position: fixed;
  top: 12px;
  right: 0;
  bottom: 12px;
  display: grid;
  align-content: start;
  gap: 14px;
  width: min(460px, calc(100vw - 32px));
  height: auto;
  max-height: calc(100dvh - 24px);
  overflow: auto;
  border-left: 2px solid var(--ink);
  background: var(--panel);
  color: var(--text);
  padding: clamp(16px, 3vw, 26px);
  pointer-events: auto;
  box-shadow: -8px 0 0 var(--mint-accent-tertiary);
  animation: edition-drawer-slide 180ms ease-out;
}

.draw-mint-body.edition-drawer-open .mint-top-actions {
  visibility: hidden;
  pointer-events: none;
}

.edition-drawer-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.edition-drawer-heading .eyebrow {
  box-shadow: 4px 4px 0 var(--mint-accent-secondary);
}

.edition-drawer-close {
  min-height: 42px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--field);
  color: var(--text);
  padding: 0 14px;
  box-shadow: 4px 4px 0 var(--ink);
  cursor: pointer;
  font-weight: 950;
}

.edition-eligibility-copy {
  display: grid;
  gap: 3px;
}

.edition-eligibility-copy strong {
  color: var(--text);
  font-size: 20px;
  font-weight: 950;
}

.edition-eligibility-copy span,
.edition-eligibility-status {
  color: var(--muted);
  font-size: 14px;
  font-weight: 850;
}

.edition-eligibility-status[data-tone="ready"] {
  color: var(--mint-success);
}

.edition-eligibility-status[data-tone="error"] {
  color: var(--mint-accent-tertiary);
}

.edition-eligibility-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.edition-eligibility-row input {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  padding: 8px 12px;
  background: var(--field);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  font-weight: 850;
}

.edition-description-card {
  margin: 0;
  padding: clamp(14px, 2vw, 20px);
  background:
    linear-gradient(90deg, var(--mint-accent-secondary-soft), transparent 58%),
    color-mix(in srgb, var(--panel) 92%, var(--mint-accent-tertiary) 8%);
}

.edition-description-card p {
  margin: 0;
  color: var(--text);
  font-size: clamp(17px, 1.55vw, 22px);
  font-weight: 800;
  line-height: 1.35;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@keyframes edition-drawer-slide {
  from {
    transform: translateX(20px);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.edition-mint-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(26px, 3vw, 44px);
  align-items: stretch;
}

.edition-mint-grid.single-edition-grid {
  grid-template-columns: minmax(0, 1040px);
  justify-content: center;
}

.edition-mint-card {
  display: grid;
  grid-template-rows: minmax(220px, 1fr) auto;
  align-self: start;
  border: 2px solid var(--ink);
  border-radius: 8px;
  overflow: hidden;
  background: var(--panel);
}

.draw-machine-card,
.single-edition-grid .edition-mint-card {
  grid-template-rows: auto;
  min-height: auto;
}

.single-edition-grid .edition-mint-card {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr);
  align-items: stretch;
}

.edition-mint-media {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-height: 0;
  max-height: 390px;
  overflow: hidden;
  border-bottom: 2px solid var(--ink);
  background: var(--panel-2);
}

.single-edition-grid .edition-mint-media {
  aspect-ratio: auto;
  min-height: clamp(360px, 48vw, 560px);
  max-height: min(70vh, 620px);
  border-right: 2px solid var(--ink);
  border-bottom: 0;
}

.edition-mint-media img,
.edition-mint-media video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.edition-mint-media audio {
  width: calc(100% - 24px);
}

.edition-media-placeholder {
  color: var(--pink);
  font-size: 42px;
  font-weight: 950;
}

.edition-mint-card-copy {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  min-height: 186px;
  overflow: visible;
  padding: 10px 12px 12px;
}

.single-edition-grid .edition-mint-card-copy {
  align-content: center;
  gap: clamp(10px, 1.4vw, 16px);
  min-height: auto;
  padding: clamp(18px, 3vw, 34px);
}

.edition-mint-card h2 {
  display: -webkit-box;
  margin: 0;
  color: var(--ink);
  font-size: clamp(19px, 1.6vw, 26px);
  line-height: 1.03;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.single-edition-grid .edition-mint-card h2 {
  font-size: clamp(34px, 4.4vw, 56px);
  -webkit-line-clamp: 3;
}

.edition-mint-description {
  display: -webkit-box;
  width: 100%;
  min-height: 0;
  margin: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-weight: 800;
  font-size: 13px;
  line-height: 1.25;
  overflow: hidden;
  overflow-wrap: anywhere;
  text-align: left;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}

.single-edition-grid .edition-mint-description {
  font-size: clamp(15px, 1.5vw, 20px);
  line-height: 1.32;
}

.edition-mint-description.is-expanded {
  display: block;
  max-height: 118px;
  overflow: auto;
  -webkit-line-clamp: initial;
}

.edition-mint-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin: 0;
}

.edition-mint-stats div {
  border: 2px solid rgba(21, 17, 17, 0.22);
  border-radius: 6px;
  min-width: 0;
  padding: 5px 6px;
  background: var(--field);
}

.edition-mint-stats dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.edition-mint-stats dt {
  color: var(--muted);
  font-size: 9px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.edition-mint-stats dd {
  color: var(--ink);
  font-size: clamp(12px, 1.05vw, 15px);
  font-weight: 950;
  line-height: 1.1;
}

.edition-mint-actions {
  display: grid;
  grid-template-columns: minmax(74px, 0.34fr) minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  justify-items: stretch;
}

.draw-machine-card .edition-mint-actions {
  grid-template-columns: 1fr;
}

.edition-mint-actions .primary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 40px;
  text-align: center;
}

.edition-qty {
  width: 100%;
  min-height: 40px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  padding: 0 12px;
  background: var(--field);
  color: var(--ink);
  font: inherit;
  font-weight: 950;
  text-align: center;
}

@media (max-width: 860px) {
  .edition-layout-workbench {
    grid-template-columns: 1fr;
  }

  .edition-element-palette {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .edition-layout-canvas,
  .edition-custom-layout {
    grid-template-columns: 1fr;
  }

  .edition-layout-tile,
  .edition-layout-tile[data-width],
  .edition-layout-block,
  .edition-layout-block[data-width] {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }

  .edition-layout-checker-row,
  .edition-layout-eligibility-results div {
    grid-template-columns: 1fr;
  }

  .edition-layout-designer-heading {
    flex-direction: column;
    align-items: stretch;
  }

  .factory-choice-grid,
  .edition-standard-grid,
  .edition-item-grid,
  .edition-page-options,
  .edition-mint-grid {
    grid-template-columns: 1fr;
  }

	  .edition-hero-panel,
	  .edition-mint-header {
	    grid-template-columns: 1fr;
	    align-items: start;
	  }

	  .edition-mint-titlebar,
	  .edition-eligibility-row {
	    grid-template-columns: 1fr;
	  }

	  .edition-mint-identity {
	    align-items: flex-start;
	  }

	  .single-edition-grid .edition-mint-card {
	    grid-template-columns: 1fr;
	  }

	  .single-edition-grid .edition-mint-media {
	    aspect-ratio: 1;
	    min-height: 0;
	    max-height: 390px;
	    border-right: 0;
	    border-bottom: 2px solid var(--ink);
	  }

	  .single-edition-grid .edition-mint-card-copy {
	    align-content: start;
	  }

	  .draw-stage {
	    grid-template-columns: 1fr;
	    padding: 14px;
	  }

	  .draw-machine-visual {
	    min-height: min(92vw, 430px);
	  }

	  .draw-counter-panel {
	    align-content: start;
	  }

	  .draw-counter-panel h2 {
	    font-size: clamp(54px, 18vw, 92px);
	  }

	  .draw-mint-body .edition-mint-shell {
	    width: min(100%, 1480px);
	    padding: 94px 10px 132px;
	    transform: none;
	  }

	  .draw-mint-body .edition-mint-banner {
	    min-height: clamp(176px, 42vw, 220px);
	  }

	  .edition-draw-banner-content {
	    grid-template-columns: 1fr;
	    align-content: end;
	    justify-items: start;
	    padding: 16px;
	  }

	  .edition-draw-banner-copy {
	    padding-right: 0;
	  }

	  .edition-draw-banner-title-row {
	    align-items: center;
	  }

	  .edition-draw-banner-logo {
	    width: clamp(42px, 13vw, 62px);
	    border-width: 2px;
	  }

	  .edition-draw-banner-copy h1 {
	    font-size: clamp(32px, 10vw, 48px);
	    line-height: 0.96;
	  }

	  .draw-mint-body .mint-top-actions {
	    position: fixed;
	    top: 10px;
	    right: 14px;
	  }

	  .draw-mint-body .mint-top-action {
	    min-height: 44px;
	    padding: 0 14px;
	    font-size: 14px;
	  }

	  .draw-stage,
	  .draw-mint-body .draw-stage {
	    grid-template-columns: 1fr;
	    height: auto;
	    min-height: 0;
	    padding: 0;
	  }

	  .draw-machine-panel .frame-grab-machine {
	    min-height: min(118vw, 620px);
	    height: min(118vw, 620px);
	  }

	  .draw-machine-panel .draw-frame-grab-canvas {
	    height: calc(100% - 18px);
	    min-height: 0;
	    max-width: calc(100% - 18px);
	  }

	  .draw-counter-panel {
	    align-content: start;
	    height: auto;
	  }

	  .draw-counter-panel .mint-countdown-time {
	    font-size: clamp(50px, 16vw, 82px);
	  }

	  .draw-stage-stats,
	  .edition-mint-stats.draw-stage-stats,
	  .draw-mint-button-row {
	    grid-template-columns: 1fr;
	  }

	  .draw-reveal-panel {
	    max-height: calc(100dvh - 28px);
	    overflow: auto;
	  }

	  .draw-reveal-cards[data-count="1"] .draw-reveal-card {
	    grid-template-columns: 1fr;
	    min-height: 0;
	  }

	  .edition-mint-logo {
	    width: 72px;
	    height: 72px;
	  }

	  .edition-phase-line {
	    grid-template-columns: 1fr;
	    gap: 2px;
	  }

	  .edition-side-rail {
	    top: auto;
	    right: 8px;
	    bottom: 12px;
	    grid-template-columns: repeat(2, minmax(0, 1fr));
	    width: min(320px, calc(100vw - 16px));
	    transform: none;
	  }

	  .edition-side-rail button {
	    min-height: 48px;
	    border: 2px solid var(--ink);
	    border-radius: 8px;
	    padding: 0 10px;
	    writing-mode: horizontal-tb;
	  }

	  .edition-slide-drawer {
	    width: min(100vw, 460px);
	  }

  .edition-phase-mini {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .edition-item-head,
  .edition-phase-title,
  .edition-saved-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .factory-choice-tile {
    min-height: auto;
  }

  .edition-mint-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

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

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    linear-gradient(90deg, rgba(21, 17, 17, 0.05) 1px, transparent 1px),
    linear-gradient(180deg, rgba(21, 17, 17, 0.05) 1px, transparent 1px),
    var(--bg);
  background-size: 32px 32px, 32px 32px, auto;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body::selection {
  background: var(--yellow);
  color: var(--ink);
}

.noise-layer {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.045;
  background-image:
    linear-gradient(45deg, var(--ink) 25%, transparent 25%),
    linear-gradient(-45deg, var(--ink) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--ink) 75%),
    linear-gradient(-45deg, transparent 75%, var(--ink) 75%);
  background-size: 6px 6px;
  background-position: 0 0, 0 3px, 3px -3px, -3px 0;
}

.platform-banner-layer {
  position: relative;
  z-index: 18;
  display: grid;
  gap: 6px;
  padding: 8px 14px 0;
  pointer-events: none;
}

.platform-banner-layer[hidden] {
  display: none;
}

.platform-banner-slot {
  display: grid;
  width: min(calc(100% - 28px), 960px);
  margin: 0 auto;
}

.platform-banner-message {
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--ink);
  box-shadow: 3px 3px 0 var(--pink);
  color: var(--yellow);
  font-size: clamp(12px, 1vw, 15px);
  font-weight: 850;
  line-height: 1.25;
  padding: 7px 12px;
  text-align: center;
}

.platform-banner-message[data-style="ticker"] {
  white-space: nowrap;
}

.platform-banner-message[data-style="ticker"] span {
  display: inline-block;
  min-width: 100%;
  animation: banner-ticker 18s linear infinite;
}

@keyframes banner-ticker {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(-100%);
  }
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  border: 0;
}

a {
  color: var(--green-dark);
}

.studio-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 60px;
  border-bottom: 2px solid var(--ink);
  background: rgba(247, 241, 232, 0.92);
  backdrop-filter: blur(18px);
  padding: 8px clamp(12px, 2.4vw, 24px);
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  min-width: 86px;
  color: var(--ink);
  font-weight: 950;
  text-decoration: none;
}

.brand-lockup img {
  width: 82px;
  height: auto;
  display: block;
}

.nav-tabs {
  display: flex;
  justify-content: center;
  gap: 6px;
  min-width: 0;
}

.wallet-actions {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.notification-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.notification-menu[hidden] {
  display: none;
}

.notification-bell {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 32px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--field);
  color: var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.notification-bell:hover,
.notification-bell:focus-visible {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--pink);
}

.notification-bell[aria-expanded="true"] {
  background: var(--yellow);
  box-shadow: 2px 2px 0 var(--pink);
}

.notification-bell svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.notification-count {
  position: absolute;
  top: -8px;
  right: -8px;
  display: inline-grid;
  min-width: 18px;
  height: 18px;
  place-items: center;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--pink);
  color: var(--white);
  padding: 0 4px;
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
}

.notification-count[hidden] {
  display: none;
}

.tab-notification-dot {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0 5px;
  border: 2px solid currentColor;
  border-radius: 999px;
  background: var(--pink);
  color: var(--white);
  font-size: 9px;
  font-weight: 950;
  line-height: 1;
  vertical-align: middle;
}

.tab-notification-dot[hidden] {
  display: none;
}

.notification-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 14px;
  z-index: 125;
  width: min(360px, calc(100vw - 24px));
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 6px 6px 0 var(--teal);
  padding: 12px;
}

.notification-panel[hidden] {
  display: none;
}

.notification-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.notification-panel-head .eyebrow {
  margin: 0;
}

.notification-panel-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.notification-list {
  display: grid;
  max-height: min(420px, calc(100vh - 170px));
  gap: 7px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
}

.notification-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  border: 2px solid rgba(21, 17, 17, 0.16);
  border-radius: 7px;
  background: var(--field);
  padding: 6px;
}

.notification-row[data-notification-type="platform_campaign"],
.notification-row[data-notification-type="referral_codes_earned"] {
  border-color: var(--pink);
  background:
    linear-gradient(135deg, rgba(255, 64, 160, 0.13), rgba(255, 211, 79, 0.19)),
    var(--field);
  box-shadow: inset 4px 0 0 var(--pink);
}

.platform-notification-main {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.platform-notification-logo {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--white);
}

.platform-notification-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.platform-notification-copy b {
  color: var(--pink);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.platform-notification-copy strong,
.platform-notification-copy p,
.platform-notification-copy small {
  margin: 0;
  overflow-wrap: anywhere;
}

.platform-notification-copy strong {
  font-size: 13px;
  line-height: 1.2;
}

.platform-notification-copy p {
  color: var(--ink);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.3;
}

.notification-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.notification-main strong,
.notification-main small {
  display: block;
}

.notification-main strong {
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.2;
}

.notification-main strong a {
  color: var(--green-dark);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
}

.notification-main strong a:hover,
.notification-main strong a:focus-visible {
  color: var(--pink);
}

.notification-main small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.35;
  text-transform: uppercase;
}

.notification-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

.notification-actions .mini-button {
  min-height: 28px;
  border-radius: 999px;
  padding: 0 9px;
  font-size: 11px;
  line-height: 1;
  box-shadow: 2px 2px 0 var(--ink);
}

.notification-actions .mini-button:hover,
.notification-actions .mini-button:focus-visible {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--ink);
}

.notification-clear-button {
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  cursor: pointer;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.notification-clear-button:hover,
.notification-clear-button:focus-visible {
  background: var(--yellow);
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--pink);
}

.notification-clear-button:disabled {
  cursor: wait;
  opacity: 0.7;
}

.compact-action {
  min-height: 36px;
  padding-inline: 10px;
}

.studio-topbar .nav-tab,
.studio-topbar .primary-action,
.studio-topbar .secondary-action {
  min-height: 32px;
  border-radius: 7px;
  padding: 0 10px;
  font-size: 13px;
  box-shadow: 2px 2px 0 var(--ink);
}

.studio-topbar .nav-tab.active {
  box-shadow: 2px 2px 0 var(--pink);
}

.studio-topbar .nav-tab:hover,
.studio-topbar .primary-action:hover,
.studio-topbar .secondary-action:hover {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--ink);
}

.workspace {
  width: min(100%, 1180px);
  margin: 0 auto;
  padding: clamp(14px, 3vw, 34px);
}

.hero-panel,
.wizard-shell,
.panel,
.action-bar {
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.hero-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: 14px;
  align-items: center;
  max-width: 1040px;
  margin: 0 auto 18px;
  padding: 14px;
  box-shadow: 6px 6px 0 var(--teal, var(--green));
}

.mint-factory-hero {
  margin-bottom: 24px;
}

.factory-landing-panel {
  max-width: 1040px;
  margin: 0 auto 22px;
  padding: clamp(16px, 3vw, 28px);
}

.factory-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.factory-choice-tile {
  display: grid;
  align-content: space-between;
  gap: 14px;
  min-height: 300px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  padding: 18px;
  background: var(--field);
  box-shadow: 5px 5px 0 var(--ink);
}

.factory-choice-tile h2 {
  margin: 10px 0;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1;
}

.factory-choice-tile p {
  margin: 0;
  color: var(--muted);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.35;
}

.factory-example {
  border-left: 5px solid var(--pink);
  padding: 10px 12px;
  background: var(--paper-2);
}

.factory-example strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
  text-transform: uppercase;
}

.factory-workspace-bar {
  display: flex;
  justify-content: flex-start;
  margin: 0 0 12px;
}

.home-welcome-panel {
  min-height: min(560px, calc(100vh - 150px));
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 18px;
  padding: clamp(28px, 7vw, 76px);
  box-shadow: 8px 8px 0 var(--teal);
}

.home-welcome-panel h1 {
  max-width: 780px;
  margin: 0;
  font-size: clamp(54px, 9vw, 112px);
  line-height: 0.92;
}

.home-welcome-panel .welcome-mantra {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.18em;
  row-gap: 0.08em;
  align-items: baseline;
  max-width: 1160px;
  font-size: clamp(42px, 7.8vw, 112px);
  line-height: 0.9;
}

.welcome-mantra span {
  display: inline-block;
}

.typewriter-break {
  display: none;
  flex-basis: 100%;
  width: 100%;
  height: 0;
}

.welcome-mantra.has-typewriter-break .typewriter-break {
  display: block;
}

.welcome-mantra mark {
  display: inline-block;
  background: var(--typewriter-highlight, var(--yellow));
  color: var(--typewriter-ink, var(--ink));
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0 0.04em 0.04em;
  text-align: left;
  white-space: nowrap;
}

.welcome-mantra mark:not(.is-typewriter-running) {
  display: inline-grid;
  background: transparent;
  color: var(--ink);
  padding: 0;
}

.typewriter-fallback-word {
  grid-area: 1 / 1;
  width: max-content;
  max-width: 100%;
  overflow: hidden;
  background: var(--yellow);
  color: var(--ink);
  opacity: 0;
  padding: 0 0.04em 0.04em;
  white-space: nowrap;
  animation: welcome-fallback-word 15s linear infinite;
}

.typewriter-fallback-word:nth-child(2) {
  background: var(--pink);
  animation-delay: 3s;
}

.typewriter-fallback-word:nth-child(3) {
  background: var(--teal);
  animation-delay: 6s;
}

.typewriter-fallback-word:nth-child(4) {
  background: var(--light-blue);
  animation-delay: 9s;
}

.typewriter-fallback-word:nth-child(5) {
  background: var(--ink);
  color: var(--white);
  animation-delay: 12s;
}

.welcome-mantra mark:not(.is-typewriter-running)::after {
  display: none;
}

.welcome-mantra mark::after {
  content: "";
  display: inline-block;
  width: 0.055em;
  height: 0.68em;
  margin-left: 0.05em;
  background: currentColor;
  vertical-align: -0.02em;
  animation: welcome-caret 900ms steps(1) infinite;
}

@keyframes welcome-fallback-word {
  0%,
  3% {
    opacity: 1;
    max-width: 0;
  }

  8%,
  15% {
    opacity: 1;
    max-width: 8em;
  }

  18% {
    opacity: 1;
    max-width: 0;
  }

  19%,
  100% {
    opacity: 0;
    max-width: 0;
  }
}

@keyframes welcome-caret {
  0%,
  45% {
    opacity: 1;
  }

  46%,
  100% {
    opacity: 0;
  }
}

.home-welcome-panel p:not(.eyebrow) {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 700;
  line-height: 1.35;
}

.home-profile-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: clamp(16px, 4vw, 42px);
  align-items: center;
  min-height: 360px;
  border-bottom: 2px solid var(--ink);
  padding: clamp(18px, 5vw, 52px) 0;
}

.home-profile-role-panel {
  min-width: 0;
  margin-top: 14px;
}

.home-profile-role-panel-content {
  width: max-content;
  max-width: 100%;
  margin-top: 0;
}

.profile-editor-heading {
  align-items: end;
}

.profile-editor-heading-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.profile-public-view-action {
  border-color: var(--light-blue);
  background: var(--light-blue);
  color: var(--white);
  box-shadow: 4px 4px 0 var(--ink);
}

.profile-public-view-action:hover {
  background: #1475d1;
}

.profile-identity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(18px, 4vw, 36px);
  align-items: center;
}

.profile-avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(132px, 17vw, 212px);
  aspect-ratio: 1;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, rgba(244, 200, 79, 0.85), transparent 32%),
    radial-gradient(circle at 72% 70%, rgba(240, 68, 155, 0.42), transparent 34%),
    var(--panel);
  background-position: center;
  background-size: cover;
  box-shadow: 8px 8px 0 var(--ink);
  overflow: hidden;
}

.profile-avatar[data-has-image="true"] > span {
  display: none;
}

.profile-avatar-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-avatar span {
  color: var(--ink);
  font-size: clamp(34px, 6vw, 72px);
  font-weight: 950;
  letter-spacing: 0;
}

.profile-upload-field input[type="file"] {
  min-height: 52px;
  padding: 12px;
  cursor: pointer;
}

.profile-upload-field .field-note {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.35;
  text-transform: none;
}

.profile-title-block {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.profile-title-block h1 {
  max-width: 620px;
  font-size: clamp(34px, 6vw, 78px);
  line-height: 0.95;
  overflow-wrap: anywhere;
}

.profile-inline-meta,
.profile-public-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.home-profile-actions {
  align-items: flex-start;
}

.profile-home-link-actions {
  display: flex;
  flex-basis: 100%;
  flex-wrap: wrap;
  gap: 10px;
}

.home-profile-signal-row {
  margin-top: 10px;
}

.profile-inline-meta span {
  color: var(--muted);
  font-weight: 900;
  overflow-wrap: anywhere;
}

.profile-icon-link {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--field);
  box-shadow: 3px 3px 0 var(--ink);
  color: var(--ink);
  font-weight: 950;
  text-decoration: none;
}

.profile-icon-link img {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.profile-6529-link {
  overflow: hidden;
}

.profile-6529-link img {
  width: 26px;
  height: 26px;
}

.profile-social-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 10px;
  align-items: end;
}

.profile-social-field label {
  min-width: 0;
}

.profile-social-field .field-note {
  grid-column: 1 / -1;
}

.profile-website-link span,
.profile-website-link span::before,
.profile-website-link span::after {
  display: block;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.profile-website-link span {
  position: relative;
  width: 20px;
  height: 20px;
}

.profile-website-link span::before,
.profile-website-link span::after {
  content: "";
  position: absolute;
}

.profile-website-link span::before {
  inset: -2px 5px;
}

.profile-website-link span::after {
  left: -2px;
  right: -2px;
  top: 7px;
  height: 0;
  border-width: 2px 0 0;
  border-radius: 0;
}

.profile-stats-panel {
  display: grid;
  gap: 18px;
}

.profile-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  border-bottom: 2px solid rgba(21, 17, 17, 0.2);
  padding-bottom: 16px;
}

.profile-stats div {
  min-width: 0;
  text-align: right;
}

.profile-stats dd {
  font-size: clamp(24px, 3.2vw, 42px);
  line-height: 0.95;
}

.profile-stats dd.collected-stat-value {
  display: grid;
  gap: 2px;
  justify-items: center;
  align-content: center;
  min-height: 42px;
  font-size: clamp(14px, 1.7vw, 20px);
  line-height: 1.05;
  text-align: center;
}

.collected-stat-value span,
.collected-stat-value small {
  display: block;
  white-space: nowrap;
}

.collected-stat-value span {
  font-weight: 950;
}

.collected-stat-value small {
  color: var(--muted);
  font-size: 0.82em;
  font-weight: 850;
}

.social-stat-button {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 950;
  line-height: 0.95;
  padding: 0;
  cursor: pointer;
}

.social-stat-button:hover {
  color: var(--green-dark);
  text-decoration: underline;
}

.profile-stats-panel p {
  max-width: 620px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 800;
  line-height: 1.45;
  text-align: right;
}

.profile-stats-panel .profile-stats-note,
.profile-stats-note {
  max-width: none;
  margin: -8px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.25;
  text-align: right;
}

.home-social-panels {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.home-social-widget {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.home-social-widget-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 0 2px;
}

.home-social-widget-heading h3 {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.home-activity-panel,
.home-suggestions-panel {
  display: grid;
  align-content: start;
  gap: 8px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--field);
  box-shadow: 3px 3px 0 rgba(240, 68, 155, 0.55);
  min-height: 0;
  padding: 8px;
}

.home-suggestions-panel {
  box-shadow: 3px 3px 0 rgba(244, 200, 79, 0.75);
}

.home-activity-panel p,
.home-activity-panel .field-note,
.home-suggestions-panel p,
.home-suggestions-panel .field-note {
  max-width: none;
  margin: 0;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
  text-align: left;
}

.activity-filter-controls {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  justify-content: flex-end;
  min-width: 0;
}

.follow-suggestion-bulk-actions {
  flex-wrap: wrap;
}

.activity-filter {
  display: inline-grid;
  place-items: center;
  min-height: 22px;
  border: 2px solid var(--ink);
  border-radius: 7px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: 1px 1px 0 var(--ink);
  padding: 0 7px;
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}

.activity-filter.active {
  background: var(--ink);
  color: var(--yellow);
  box-shadow: 1px 1px 0 var(--pink);
}

.activity-list,
.social-list {
  display: grid;
  gap: 6px;
}

.activity-list {
  max-height: calc((44px * 5) + (6px * 4));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
}

.suggestion-list {
  max-height: calc((44px * 5) + (6px * 4));
}

.activity-item,
.social-person-row,
.follow-suggestion-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  border: 2px solid rgba(21, 17, 17, 0.18);
  border-radius: 7px;
  background: var(--panel);
  padding: 5px;
}

.activity-item,
.follow-suggestion-row {
  min-height: 44px;
}

.activity-main,
.social-person-main,
.follow-suggestion-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.activity-main strong,
.social-person-main strong,
.follow-suggestion-main strong {
  display: block;
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.2;
}

.activity-main small,
.social-person-main small,
.follow-suggestion-main small,
.activity-empty {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.35;
}

.activity-loading {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.home-panel-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 999px;
  animation: eligibility-spin 700ms linear infinite;
}

.follow-suggestion-main {
  cursor: pointer;
}

.follow-suggestion-reason {
  color: var(--green-dark);
}

.social-avatar {
  display: grid;
  place-items: center;
  width: 30px;
  aspect-ratio: 1;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, rgba(244, 200, 79, 0.85), transparent 32%),
    radial-gradient(circle at 72% 70%, rgba(240, 68, 155, 0.42), transparent 34%),
    var(--field);
  background-position: center;
  background-size: cover;
  color: var(--ink);
  font-size: 11px;
  font-weight: 950;
  overflow: hidden;
}

.social-avatar[data-has-image="true"] {
  color: transparent;
  font-size: 0;
}

.social-person-actions {
  display: flex;
  justify-content: flex-end;
}

.social-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  justify-items: end;
  background: rgba(21, 17, 17, 0.35);
  padding: clamp(12px, 3vw, 28px);
}

.social-drawer-panel {
  display: grid;
  align-content: start;
  gap: 14px;
  width: min(100%, 520px);
  max-height: calc(100vh - 56px);
  overflow: auto;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 8px 8px 0 var(--pink);
  padding: clamp(14px, 3vw, 22px);
}

.social-drawer-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.social-drawer-heading h2 {
  font-size: clamp(26px, 4vw, 42px);
}

.profile-unsaved-backdrop {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  background: rgba(21, 17, 17, 0.42);
  padding: clamp(14px, 3vw, 28px);
}

.profile-unsaved-panel {
  display: grid;
  gap: 14px;
  width: min(100%, 500px);
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 8px 8px 0 var(--pink);
  padding: clamp(16px, 4vw, 24px);
}

.profile-unsaved-panel h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(28px, 6vw, 44px);
  line-height: 0.95;
}

.profile-unsaved-panel p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.45;
}

.phase-schedule-confirm-detail {
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--field);
  box-shadow: 5px 5px 0 var(--pink);
  padding: 12px;
  color: var(--ink) !important;
  font-weight: 950 !important;
}

.profile-unsaved-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.publish-notify-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--field);
  box-shadow: 4px 4px 0 var(--yellow);
  padding: 12px;
  color: var(--ink);
  cursor: pointer;
}

.publish-notify-option input {
  width: 28px;
  height: 28px;
  accent-color: var(--pink);
}

.publish-notify-option strong,
.publish-notify-option small {
  display: block;
}

.publish-notify-option strong {
  font-size: 15px;
  line-height: 1.1;
}

.publish-notify-option small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
}

.global-error-toast {
  position: fixed;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 170;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  max-width: min(520px, calc(100vw - 28px));
  border: 2px solid var(--pink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--pink);
  box-shadow: 4px 4px 0 var(--yellow);
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.25;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 10px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.global-error-toast[data-tone="success"] {
  border-color: var(--ink);
  color: var(--panel);
  box-shadow: 4px 4px 0 var(--green);
}

.global-error-toast[data-tone="info"] {
  border-color: var(--ink);
  color: var(--panel);
  box-shadow: 4px 4px 0 var(--yellow);
}

.global-error-toast[hidden] {
  display: none;
}

.global-toast-check {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 2px solid var(--green);
  border-radius: 999px;
  background: var(--green);
}

.global-toast-check::before {
  content: "";
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: translateY(-1px) rotate(45deg);
}

.global-error-toast.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.wallet-picker-backdrop {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  background: rgba(21, 17, 17, 0.34);
  backdrop-filter: blur(6px);
  padding: clamp(10px, 3vw, 22px);
}

.wallet-picker-panel {
  --wallet-picker-panel-bg: var(--panel);
  --wallet-picker-panel-fg: var(--ink);
  --wallet-picker-panel-muted: var(--muted);
  --wallet-picker-card-bg: var(--field);
  --wallet-picker-card-fg: var(--ink);
  --wallet-picker-card-muted: var(--muted);
  --wallet-picker-border: var(--ink);
  display: grid;
  gap: 12px;
  position: relative;
  width: min(100%, 380px);
  max-height: calc(100vh - 32px);
  overflow: auto;
  border: 2px solid var(--wallet-picker-border);
  border-radius: 8px;
  background: var(--wallet-picker-panel-bg);
  color: var(--wallet-picker-panel-fg);
  box-shadow: 6px 6px 0 var(--pink);
  padding: clamp(18px, 4vw, 24px);
}

.wallet-picker-heading {
  display: flex;
  justify-content: flex-end;
  min-height: 28px;
}

.wallet-picker-title-block {
  display: grid;
  justify-items: center;
  gap: 9px;
  text-align: center;
}

.wallet-picker-logo {
  display: block;
  width: min(104px, 36vw);
  height: auto;
  max-height: 60px;
  object-fit: contain;
}

.wallet-picker-title-block h2 {
  margin: 0;
  color: var(--wallet-picker-panel-fg);
  font-size: clamp(23px, 4vw, 30px);
  line-height: 1.05;
  font-weight: 800;
}

.wallet-picker-title-block p {
  margin: 0;
  color: var(--wallet-picker-panel-muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

.wallet-picker-close,
.wallet-picker-option {
  border: 2px solid var(--wallet-picker-border);
  border-radius: 8px;
  background: var(--wallet-picker-card-bg);
  color: var(--wallet-picker-card-fg);
  font: inherit;
  font-weight: 950;
  cursor: pointer;
}

.wallet-picker-close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  min-height: 0;
  padding: 0;
  border-color: var(--wallet-picker-border);
  border-radius: 50%;
  background: var(--field);
  color: var(--ink);
  box-shadow: none;
  font-size: 27px;
  font-weight: 300;
  line-height: 1;
}

.wallet-picker-close:hover,
.wallet-picker-close:focus-visible {
  background: var(--yellow);
  color: var(--ink);
  outline: none;
}

.wallet-picker-list {
  display: grid;
  gap: 8px;
}

.wallet-picker-option {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 8px 10px;
  text-align: left;
  box-shadow: none;
}

.wallet-picker-option:hover,
.wallet-picker-option:focus-visible {
  border-color: var(--pink);
  background: var(--panel-2);
  color: var(--wallet-picker-card-fg);
  outline: none;
}

.wallet-picker-option.is-unavailable {
  cursor: not-allowed;
}

.wallet-picker-option:disabled {
  cursor: wait;
}

.wallet-picker-avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  aspect-ratio: 1;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  background:
    radial-gradient(circle at 30% 24%, rgba(244, 200, 79, 0.9), transparent 34%),
    radial-gradient(circle at 75% 74%, rgba(240, 68, 155, 0.42), transparent 38%),
    var(--panel-2);
  color: var(--wallet-picker-card-fg);
  font-size: 11px;
  font-weight: 950;
}

.wallet-picker-option:not(.is-unavailable) .wallet-picker-avatar::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 9px;
  aspect-ratio: 1;
  border: 2px solid var(--wallet-picker-panel-bg);
  border-radius: 50%;
  background: #76e8b5;
}

.wallet-picker-avatar.has-image {
  background: var(--panel-2);
}

.wallet-picker-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wallet-picker-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.wallet-picker-copy strong,
.wallet-picker-copy small,
.wallet-picker-last-used {
  overflow-wrap: anywhere;
}

.wallet-picker-copy strong {
  color: var(--wallet-picker-card-fg);
  font-size: 17px;
  line-height: 1.1;
  font-weight: 650;
}

.wallet-picker-copy small {
  color: var(--wallet-picker-card-muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
}

.wallet-picker-detail-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.wallet-picker-last-used {
  margin-left: auto;
  border: 1px solid var(--wallet-picker-card-fg);
  border-radius: 8px;
  background: var(--wallet-picker-card-fg);
  color: var(--wallet-picker-card-bg);
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.wallet-picker-status {
  min-height: 18px;
  margin: 0;
  color: var(--pink);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
}

.wallet-picker-footer {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
  text-align: center;
}

.profile-editor-panel,
.home-feed-preview {
  margin-top: 22px;
}

.profile-editor-panel {
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 8px 8px 0 var(--pink);
  padding: clamp(16px, 3vw, 24px);
}

.dedicated-profile-panel {
  max-width: 1040px;
  margin: 0 auto;
}

.profile-editor-body {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 32px);
  align-items: start;
  margin-top: 18px;
}

.profile-editor-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.profile-editor-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--field);
  box-shadow: 3px 3px 0 var(--ink);
  color: var(--ink);
  padding: 0 14px;
  font-size: 15px;
  font-weight: 950;
  cursor: pointer;
}

.profile-editor-tab.active {
  background: var(--ink);
  box-shadow: 3px 3px 0 var(--pink);
  color: var(--white);
}

.profile-editor-panels {
  margin-top: 16px;
}

.profile-editor-tab-panel {
  min-width: 0;
}

.profile-edit-visual {
  display: grid;
  gap: 14px;
  justify-items: start;
  min-width: 0;
  padding-top: 2px;
}

.profile-edit-avatar {
  width: min(100%, clamp(190px, 24vw, 300px));
  cursor: pointer;
}

.profile-edit-avatar:focus-visible {
  outline: 4px solid var(--teal);
  outline-offset: 6px;
}

.profile-editor-fields {
  min-width: 0;
}

.form-grid.profile-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  align-content: start;
}

.profile-form-grid > label {
  align-self: start;
}

.profile-form-grid .wide-field {
  grid-column: 1 / -1;
}

.profile-form-grid textarea {
  min-height: 94px;
}

.profile-media-card {
  display: grid;
  gap: 10px;
  width: 100%;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--field);
  box-shadow: 3px 3px 0 var(--yellow);
  padding: 10px;
}

.profile-media-topline {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.profile-media-controls {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.media-choice-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.media-choice-heading span {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
  text-transform: uppercase;
}

.media-choice-heading small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.profile-media-mode {
  display: inline-grid;
  grid-template-columns: repeat(2, max-content);
  width: fit-content;
  max-width: 100%;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 3px 3px 0 var(--ink);
  overflow: hidden;
}

.profile-media-mode label {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0 14px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.profile-media-mode label + label {
  border-left: 2px solid var(--ink);
}

.profile-media-mode label:has(input:checked) {
  background: var(--yellow);
  box-shadow: inset 0 -3px 0 var(--pink);
}

.profile-media-mode input {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

.profile-media-panel {
  display: grid;
  gap: 8px;
}

.profile-link-stack-editor {
  display: grid;
  gap: 10px;
}

.profile-link-stack-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.profile-link-stack-list {
  display: grid;
  gap: 10px;
}

.profile-link-row {
  display: grid;
  gap: 10px;
  align-items: start;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--paper-2);
  box-shadow: 4px 4px 0 var(--ink);
  padding: 10px;
}

.profile-link-row-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.profile-link-collapse-button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px;
  min-width: 0;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--ink);
  padding: 0;
  text-align: left;
  cursor: pointer;
}

.profile-link-collapse-icon {
  grid-row: span 2;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--yellow);
  color: var(--ink);
  font-size: 16px;
  font-weight: 950;
  line-height: 1;
}

.profile-link-collapse-button span,
.profile-link-collapse-button small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-link-collapse-button span {
  font-size: 16px;
  font-weight: 950;
}

.profile-link-collapse-button small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.profile-link-row-main {
  display: grid;
  grid-template-columns: minmax(110px, 0.55fr) minmax(150px, 1fr);
  gap: 8px;
  min-width: 0;
}

.profile-link-row.collapsed .profile-link-row-main {
  display: none;
}

.profile-link-row-main .wide-field {
  grid-column: 1 / -1;
}

.profile-link-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
}

.profile-link-media-control {
  display: grid;
  gap: 8px;
}

.profile-link-media-heading {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.profile-link-media-tabs {
  display: inline-flex;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--field);
  box-shadow: 2px 2px 0 var(--ink);
}

.profile-link-media-tabs button {
  min-height: 30px;
  border: 0;
  border-right: 2px solid var(--ink);
  background: transparent;
  color: var(--ink);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
}

.profile-link-media-tabs button:last-child {
  border-right: 0;
}

.profile-link-media-tabs button.active {
  background: var(--yellow);
  box-shadow: inset 0 -3px 0 var(--pink);
}

.profile-link-media-panel {
  display: grid;
  gap: 6px;
}

.profile-link-media-status {
  color: var(--green-dark);
  font-weight: 850;
}

.profile-link-media-status[data-state="error"] {
  color: var(--pink);
  font-weight: 950;
}

.profile-link-remove-icon {
  color: var(--pink);
}

.link-stack-add {
  justify-self: start;
  min-height: 38px;
  padding-inline: 14px;
}

.compact-empty-state {
  min-height: auto;
  border-width: 2px;
  border-radius: 8px;
  padding: 12px;
}

.compact-empty-state h3 {
  font-size: 15px;
  line-height: 1.2;
}

.profile-preferences {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.profile-wallet-manager {
  display: grid;
  gap: 10px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--field);
  box-shadow: 3px 3px 0 var(--yellow);
  padding: 12px;
}

.profile-wallet-list {
  display: grid;
  gap: 8px;
}

.profile-wallet-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 2px solid var(--soft-border);
  border-radius: 8px;
  background: var(--panel);
  padding: 8px 10px;
}

.profile-wallet-row.primary {
  border-color: var(--ink);
}

.profile-wallet-row strong {
  display: block;
  color: var(--ink);
  font-size: 16px;
  font-weight: 950;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-wallet-row span {
  display: block;
  margin-top: 1px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.profile-wallet-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.profile-wallet-remove {
  min-height: 30px;
  padding: 0 10px;
  font-size: 12px;
}

.profile-wallet-remove:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.profile-wallet-add {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.profile-wallet-add .secondary-action {
  min-height: 42px;
  padding: 0 14px;
  font-size: 15px;
}

.profile-preferences-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
}

.profile-preferences-heading h3 {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.profile-preferences-heading p {
  max-width: 560px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
  text-align: right;
}

.notification-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 8px;
  margin-top: 0;
}

.notification-options .check-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 31px;
  gap: 11px;
  align-items: center;
  min-height: 54px;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.18;
}

.notification-options .check-row input {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-content: center;
  width: 22px;
  height: 22px;
  min-height: 22px;
  border: 2px solid var(--ink);
  border-radius: 5px;
  background: var(--panel);
  box-shadow: 2px 2px 0 var(--ink);
}

.notification-options .check-row input::after {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 2px;
  background: var(--teal);
  transform: scale(0);
}

.notification-options .check-row input:checked::after {
  transform: scale(1);
}

.notification-options .check-row .info-button {
  justify-self: end;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  font-size: 12px;
}

.preference-label-text {
  min-width: 0;
}

.profile-referrals {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  border-top: 2px solid rgba(21, 17, 17, 0.16);
  padding-top: 14px;
}

.profile-referral-gate {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) max-content;
  gap: 10px;
  align-items: end;
}

.profile-referral-creator {
  display: grid;
  gap: 12px;
}

.profile-referral-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.profile-referral-tab {
  min-height: 34px;
  border: 2px solid var(--ink);
  border-radius: 7px;
  background: var(--field);
  color: var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  padding: 0 12px;
  font-size: 13px;
  font-weight: 950;
}

.profile-referral-tab.active {
  background: var(--ink);
  color: var(--paper);
  box-shadow: 3px 3px 0 var(--pink);
}

.profile-referral-panels {
  display: grid;
  gap: 10px;
}

.profile-referral-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.profile-referral-stats > div {
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--field);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 10px;
}

.profile-referral-code-wrap {
  display: grid;
  gap: 8px;
}

.profile-referral-code-wrap h4 {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 950;
  text-transform: uppercase;
}

.profile-referral-codes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
}

.profile-referral-code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--paper-2);
  padding: 8px;
}

.profile-referral-code code {
  min-width: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.profile-referral-history {
  display: grid;
  gap: 8px;
}

.profile-referral-history-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 2px solid rgba(21, 17, 17, 0.18);
  border-radius: 8px;
  background: var(--field);
  padding: 10px;
}

.profile-referral-history-row strong,
.profile-referral-history-row a {
  color: var(--ink);
  font-weight: 950;
  text-decoration: none;
}

.profile-referral-history-row p,
.profile-referral-history-row span {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.small-action {
  min-height: 32px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: var(--field);
  color: var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
}

.creator-locked {
  opacity: 0.66;
}

.profile-editor-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
}

.profile-editor-footer .status-line {
  margin: 0;
}

.profile-editor-footer .secondary-action {
  flex: 0 0 auto;
}

.home-app-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 24px;
}

.home-app-tile {
  display: grid;
  align-content: space-between;
  gap: 18px;
  min-height: clamp(230px, 28vw, 330px);
  aspect-ratio: 1.12;
  border: 3px solid var(--ink);
  border-radius: 8px;
  background: var(--yellow);
  box-shadow: 10px 10px 0 var(--ink);
  color: var(--ink);
  padding: clamp(18px, 3vw, 30px);
  text-align: left;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.home-app-tile:nth-child(2) {
  background: var(--panel);
  box-shadow: 10px 10px 0 var(--pink);
}

.home-app-tile:hover,
.home-app-tile:focus-visible {
  transform: translate(3px, 3px);
  box-shadow: 5px 5px 0 var(--ink);
}

.home-app-tile:nth-child(2):hover,
.home-app-tile:nth-child(2):focus-visible {
  box-shadow: 5px 5px 0 var(--pink);
}

.home-app-tile span {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--panel);
  font-weight: 950;
}

.home-app-tile strong {
  display: block;
  max-width: 420px;
  font-size: clamp(28px, 4vw, 56px);
  line-height: 0.95;
  overflow-wrap: anywhere;
}

.home-app-tile small {
  display: block;
  max-width: 430px;
  color: var(--text);
  font-size: clamp(14px, 1.4vw, 17px);
  font-weight: 850;
  line-height: 1.35;
}

.art-feed-panel {
  display: grid;
  gap: 18px;
}

.art-feed-panel > .panel-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, auto);
  align-items: end;
  gap: 18px;
}

.art-feed-panel > .panel-heading > div:first-child {
  min-width: 0;
}

.art-feed-panel #artFeedTitle {
  max-width: 100%;
}

.feed-toolbar {
  display: grid;
  grid-template-columns: auto auto;
  gap: 30px;
  align-items: end;
  justify-content: start;
}

.discovery-tabs {
  padding-right: 18px;
  border-right: 2px solid rgba(21, 17, 17, 0.22);
}

.art-feed-heading-actions {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
}

.feed-tabs,
.feed-scope-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.discovery-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(86px, 1fr));
}

.discovery-tabs .feed-tab {
  width: 100%;
}

.feed-view-tabs,
.feed-filter-tabs {
  align-items: center;
}

.feed-filter-tabs {
  position: relative;
  padding-left: 18px;
}

.feed-filter-tabs::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 7px;
  bottom: 7px;
  width: 2px;
  border-radius: 999px;
  background: rgba(21, 17, 17, 0.22);
}

.feed-display-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.feed-display-controls[hidden] {
  display: none;
}

.feed-display-controls > span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 950;
  text-transform: uppercase;
}

.art-feed-list-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 12px;
}

.art-feed-list-header[hidden] {
  display: none;
}

.feed-tab-stack {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.feed-tab,
.feed-scope {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--field);
  box-shadow: 3px 3px 0 var(--ink);
  color: var(--ink);
  font-weight: 950;
  padding: 0 13px;
  cursor: pointer;
}

.feed-tab.active,
.feed-scope.active {
  background: var(--ink);
  color: var(--paper);
  box-shadow: 3px 3px 0 var(--pink);
}

.feed-scope-note {
  margin: 2px 0 14px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 850;
}

.feed-search-label {
  display: grid;
  gap: 6px;
  min-width: min(100%, 320px);
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.feed-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.feed-grid.is-compact-display {
  grid-template-columns: 1fr;
  gap: 12px;
}

.feed-grid.profile-dashboard-grid {
  display: block;
}

.feed-grid.user-discovery-grid {
  grid-template-columns: minmax(0, 720px);
}

.user-discovery-panel {
  display: grid;
  gap: 10px;
  width: min(100%, 720px);
}

.user-discovery-list {
  display: grid;
  gap: 8px;
}

.user-discovery-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  border: 2px solid rgba(21, 17, 17, 0.18);
  border-radius: 8px;
  background: var(--field);
  color: var(--ink);
  padding: 8px 10px;
}

.user-discovery-main {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

.user-discovery-row:hover,
.user-discovery-row:focus-within {
  border-color: var(--ink);
  box-shadow: 3px 3px 0 var(--pink);
  transform: translate(-1px, -1px);
}

.user-discovery-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.user-discovery-copy strong {
  overflow-wrap: anywhere;
  font-size: 16px;
  font-weight: 950;
  line-height: 1.08;
}

.user-discovery-copy small {
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
}

.user-discovery-actions {
  display: flex;
  align-items: center;
  justify-content: end;
}

.user-discovery-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 3px;
}

.user-discovery-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 2px 6px;
  color: var(--ink);
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.user-discovery-badge.role-creator {
  background: rgba(248, 201, 75, 0.44);
}

.user-discovery-badge.role-collector {
  background: rgba(20, 156, 146, 0.18);
}

.user-discovery-badge.role-curator {
  background: rgba(240, 68, 155, 0.16);
}

.user-discovery-load-more {
  display: flex;
  justify-content: center;
  padding: 4px 0 2px;
}

.profile-dashboard {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  width: 100%;
  align-items: start;
}

.profile-dashboard.creator-profile-dashboard {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.profile-dashboard-section {
  display: grid;
  align-content: start;
  align-self: start;
  gap: 14px;
  min-width: 0;
  min-height: 0;
  box-shadow: none !important;
  max-height: min(74vh, 820px);
  overflow: auto;
  scrollbar-gutter: stable;
}

.profile-dashboard > .profile-dashboard-section {
  height: clamp(520px, 68vh, 760px);
  margin-top: 0;
}

.profile-dashboard > .panel + .panel {
  margin-top: 0;
}

.profile-preview-panel {
  display: grid;
  gap: 18px;
  box-shadow: 8px 8px 0 var(--pink);
}

.profile-preview-heading {
  align-items: start;
}

.profile-preview-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr);
  gap: 24px;
  align-items: center;
  padding: 8px 0 18px;
  border-bottom: 2px solid rgba(21, 17, 17, 0.16);
}

.profile-preview-identity {
  min-width: 0;
}

.profile-preview-avatar {
  width: clamp(132px, 18vw, 220px);
  flex: 0 0 auto;
}

.profile-preview-hero h1 {
  margin: 0;
  font-size: clamp(38px, 5vw, 72px);
  line-height: 0.95;
  overflow-wrap: anywhere;
}

.profile-preview-message {
  max-width: 54ch;
  color: var(--muted);
  font-size: 16px;
}

.profile-preview-stats {
  margin: 0;
}

.profile-dashboard-heading {
  align-items: start;
}

.profile-dashboard-count {
  display: inline-grid;
  place-items: center;
  min-width: 48px;
  min-height: 42px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--yellow);
  box-shadow: 4px 4px 0 var(--ink);
  color: var(--ink);
  font-size: 18px;
  font-weight: 950;
}

.profile-dashboard-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.profile-activity-list {
  display: grid;
  gap: 8px;
}

.profile-activity-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  grid-template-areas: "avatar body action";
  align-items: center;
  gap: 8px 10px;
  min-width: 0;
  border: 2px solid rgba(21, 17, 17, 0.18);
  border-radius: 10px;
  background: var(--field);
  padding: 8px 10px;
}

.profile-activity-row .mini-button {
  min-height: 24px;
  border-radius: 999px;
  padding: 0 7px;
  font-size: 10px;
  box-shadow: 2px 2px 0 var(--ink);
}

.profile-activity-avatar-link {
  grid-area: avatar;
  display: inline-grid;
  place-items: center;
  width: fit-content;
  color: inherit;
  text-decoration: none;
}

.profile-activity-side-action {
  grid-area: action;
  display: flex;
  align-self: center;
  justify-content: center;
  width: auto;
  min-width: 0;
}

.profile-activity-side-action .mini-button {
  max-width: 76px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-activity-follow-button {
  min-height: 26px;
  border-width: 2px;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  padding: 0 10px;
  font-size: 11px;
  font-weight: 950;
}

.profile-activity-thumb {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, rgba(244, 200, 79, 0.85), transparent 32%),
    radial-gradient(circle at 72% 70%, rgba(240, 68, 155, 0.42), transparent 34%),
    var(--field);
  background-position: center;
  background-size: cover;
  color: var(--ink);
  font-size: 10px;
  font-weight: 950;
  overflow: hidden;
}

.profile-activity-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.profile-activity-main strong {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
  line-height: 1.1;
}

.profile-activity-main small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  white-space: nowrap;
}

.profile-dashboard-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.profile-dashboard-filter {
  min-height: 32px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--field);
  color: var(--ink);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
}

.profile-dashboard-filter.active {
  background: var(--ink);
  box-shadow: 3px 3px 0 var(--pink);
  color: var(--field);
}

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

.profile-curation-card {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--field);
  overflow: hidden;
}

.profile-curation-media {
  position: relative;
  min-height: 108px;
  background-color: var(--yellow);
  background-position: center;
  background-size: cover;
  text-decoration: none;
}

.profile-curation-media .feed-status-badge {
  position: absolute;
  right: 5px;
  bottom: 5px;
  max-width: calc(100% - 10px);
  font-size: 9px;
}

.profile-curation-body {
  display: grid;
  align-content: center;
  gap: 5px;
  min-width: 0;
  padding: 9px 10px 9px 0;
}

.profile-curation-body h3 {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 17px;
  line-height: 1.05;
}

.profile-curation-body h3 a {
  color: inherit;
  text-decoration: none;
}

.profile-curation-body > .eyebrow,
.profile-curation-body > .feed-artist-link,
.profile-curation-body > .profile-curation-artist-line {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-curation-artist-line {
  min-width: 0;
}

.profile-curation-artist {
  width: fit-content;
  max-width: 100%;
  border: 0;
  background: transparent;
  color: var(--green-dark);
  padding: 0;
  font-size: 12px;
  font-weight: 950;
  text-align: left;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.profile-curation-artist,
.profile-curation-artist:hover,
.profile-curation-artist:focus-visible {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.profile-curation-metrics {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.profile-curation-metric {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.profile-curation-metric svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: var(--ink);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4;
}

.profile-curation-metric.has-value svg.heart-icon {
  fill: var(--pink);
}

.profile-curation-metric.has-value svg.favorite-icon {
  fill: var(--yellow);
}

.profile-curation-metric.has-value svg.heart-icon path {
  fill: var(--pink);
}

.profile-curation-metric.has-value svg.favorite-icon path {
  fill: var(--yellow);
}

.profile-curation-metrics > small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.compact-feed-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 14px;
}

.feed-profile-panel {
  display: grid;
  gap: 18px;
  margin: 18px 0;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--field);
  box-shadow: 6px 6px 0 var(--green);
  padding: clamp(18px, 3vw, 28px);
}

.feed-profile-identity {
  grid-template-columns: auto minmax(0, 1fr);
}

.feed-profile-avatar {
  width: clamp(104px, 14vw, 156px);
  box-shadow: 6px 6px 0 var(--ink);
}

.feed-profile-copy {
  grid-template-columns: minmax(0, 1fr) minmax(240px, 0.72fr);
  grid-template-areas:
    "topline topline"
    "title roles"
    "meta roles"
    "message roles"
    "actions roles";
  column-gap: clamp(18px, 3vw, 42px);
  gap: 10px;
}

.feed-profile-copy .feed-profile-topline {
  grid-area: topline;
}

.feed-profile-copy .feed-profile-title-row {
  grid-area: title;
}

.feed-profile-copy .profile-inline-meta {
  grid-area: meta;
}

.feed-profile-copy .feed-profile-message {
  grid-area: message;
}

.feed-profile-copy .feed-card-actions {
  grid-area: actions;
}

.feed-profile-role-slot {
  grid-area: roles;
  justify-self: start;
  width: min(100%, 720px);
  min-width: 0;
  align-self: start;
}

.feed-profile-role-slot .profile-role-panel {
  gap: 8px;
  width: 100%;
  max-width: 100%;
  margin-top: 0;
  --profile-role-card-min: 112px;
}

.feed-profile-role-slot .profile-role-badges {
  grid-template-columns: repeat(3, minmax(112px, 1fr));
  gap: 6px;
}

.feed-profile-role-slot .profile-role-badge {
  min-width: 0;
  box-shadow: 2px 2px 0 var(--ink);
  padding: 7px 8px;
}

.feed-profile-role-slot .profile-role-badge .profile-role-name,
.feed-profile-role-slot .profile-role-badge strong {
  font-size: 15px;
}

.feed-profile-role-slot .profile-role-badge small,
.feed-profile-role-slot .profile-role-badge small a {
  font-size: 10px;
}

.feed-profile-role-slot .profile-role-badge .profile-role-detail {
  font-size: 9px;
}

.feed-profile-role-slot .profile-role-mix {
  gap: 4px;
}

.feed-profile-role-slot .profile-role-mix-bar {
  height: 12px;
}

.feed-profile-role-slot .profile-role-mix p {
  gap: 4px 9px;
  font-size: 10px;
}

.feed-profile-copy h2 {
  max-width: 780px;
  font-size: clamp(32px, 5vw, 58px);
  line-height: 0.98;
  overflow-wrap: anywhere;
}

.feed-profile-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  min-width: 0;
}

.feed-profile-title-row h2 {
  margin: 0;
}

.feed-profile-signals {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.feed-profile-signals .public-profile-signal.social-stat-button {
  display: inline-grid;
  width: auto;
  min-width: 44px;
  align-items: center;
  justify-content: center;
  justify-items: center;
  gap: 2px;
  padding: 6px 8px;
  line-height: 1;
  text-decoration: none;
}

.feed-profile-signals .public-profile-signal svg {
  width: 18px;
  height: 18px;
}

.feed-profile-topline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.feed-profile-close {
  width: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  font-size: 27px;
  line-height: 1;
}

.feed-profile-message {
  max-width: 760px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.45;
}

.feed-profile-icon-link {
  width: 38px;
  height: 38px;
  color: var(--green-dark);
  box-shadow: 3px 3px 0 var(--green);
}

.feed-profile-stats {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.feed-profile-stats div {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 6px;
  text-align: center;
}

.feed-profile-stats .social-stat-button {
  justify-content: center;
}

.feed-profile-stats-note {
  text-align: right;
}

.launch-calendar-list {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.launch-calendar-list.is-full-display {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.calendar-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1.4fr) minmax(220px, 0.7fr) auto;
  gap: 14px;
  align-items: center;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--field);
  box-shadow: 4px 4px 0 var(--ink);
  padding: 14px;
}

.calendar-row-media {
  appearance: none;
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(244, 200, 79, 0.82), rgba(240, 68, 155, 0.28)),
    var(--panel);
  background-position: center;
  background-size: cover;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  overflow: hidden;
}

.calendar-row-media[data-has-image="true"] span {
  opacity: 0;
}

.calendar-row-media span {
  font-size: 18px;
  font-weight: 950;
}

.calendar-row h3 {
  margin-top: 4px;
  font-size: clamp(20px, 2.4vw, 30px);
}

.calendar-row-copy > span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-weight: 850;
}

.feed-row-profile-link {
  appearance: none;
  width: fit-content;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  text-align: left;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.feed-row-profile-link:hover,
.feed-row-profile-link:focus-visible {
  color: var(--pink);
}

.calendar-row dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.calendar-row .feed-card-actions {
  justify-content: flex-end;
}

.collector-leaderboard-panel {
  display: grid;
  gap: 14px;
}

.leaderboard-copy {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
}

.leaderboard-filter-panel {
  display: grid;
  gap: 10px;
  border: 2px solid rgba(21, 17, 17, 0.16);
  border-radius: 8px;
  background: rgba(244, 200, 79, 0.08);
  padding: 12px;
}

.leaderboard-filter-row,
.leaderboard-range-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
}

.leaderboard-filter-control {
  display: grid;
  gap: 5px;
  min-width: 164px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.leaderboard-filter-control select,
.leaderboard-filter-control input,
.leaderboard-creator-search input {
  width: 100%;
  min-height: 44px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--field);
  color: var(--ink);
  padding: 8px 12px;
  font: inherit;
  font-size: 14px;
  font-weight: 850;
}

.leaderboard-creator-filter {
  display: grid;
  gap: 8px;
}

.leaderboard-creator-filter-head {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.leaderboard-creator-filter-head .text-button {
  border: 0;
  background: transparent;
  color: var(--green-dark);
  padding: 0;
  font-size: 12px;
  font-weight: 950;
  text-decoration: underline;
  cursor: pointer;
}

.leaderboard-creator-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 36px;
  align-items: center;
}

.leaderboard-filter-empty {
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.leaderboard-filter-chip {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  max-width: 100%;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--field);
  color: var(--ink);
  padding: 4px 9px 4px 4px;
  font-size: 13px;
  font-weight: 950;
  cursor: pointer;
}

.leaderboard-filter-chip strong {
  color: var(--pink);
  font-size: 14px;
  line-height: 1;
}

.mini-avatar {
  width: 28px;
  height: 28px;
  min-width: 28px;
  font-size: 10px;
}

.leaderboard-creator-search {
  position: relative;
  max-width: 560px;
}

.leaderboard-creator-suggestions {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  display: grid;
  gap: 4px;
  max-height: 280px;
  overflow: auto;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--field);
  box-shadow: 4px 4px 0 var(--green);
  padding: 6px;
}

.leaderboard-creator-suggestion {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  padding: 7px;
  text-align: left;
  cursor: pointer;
}

.leaderboard-creator-suggestion:hover {
  background: rgba(20, 156, 146, 0.12);
}

.leaderboard-creator-suggestion strong,
.leaderboard-creator-suggestion small {
  display: block;
  overflow-wrap: anywhere;
}

.leaderboard-creator-suggestion strong {
  font-size: 14px;
  font-weight: 950;
}

.leaderboard-creator-suggestion small,
.leaderboard-creator-loading {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.collector-leaderboard-list {
  display: grid;
  gap: 8px;
}

.leaderboard-header,
.collector-leaderboard-row {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) minmax(300px, 0.9fr);
  gap: 12px;
  align-items: center;
}

.leaderboard-header {
  border: 2px solid rgba(21, 17, 17, 0.16);
  border-radius: 8px;
  background: rgba(20, 156, 146, 0.12);
  padding: 10px 14px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.collector-leaderboard-row {
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--field);
  box-shadow: 4px 4px 0 var(--ink);
  padding: 12px 14px;
}

.collector-leaderboard-row.is-viewer {
  background: linear-gradient(90deg, rgba(240, 68, 155, 0.14), var(--field) 55%);
  box-shadow: 4px 4px 0 var(--pink);
}

.collector-leaderboard-row.is-pinned {
  border-color: var(--pink);
}

.leaderboard-viewer-divider {
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.leaderboard-rank {
  display: grid;
  gap: 4px;
  align-content: center;
  min-height: 54px;
}

.leaderboard-rank strong {
  color: var(--ink);
  font-size: clamp(26px, 4vw, 44px);
  line-height: 0.95;
}

.leaderboard-crown {
  width: fit-content;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--yellow);
  box-shadow: 2px 2px 0 var(--ink);
  padding: 2px 8px;
  color: var(--ink);
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.leaderboard-user {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  padding: 0;
  text-align: left;
  cursor: pointer;
}

.leaderboard-user strong {
  display: block;
  overflow-wrap: anywhere;
  font-size: clamp(18px, 2.2vw, 26px);
  line-height: 1.05;
}

.leaderboard-user small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

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

.leaderboard-totals div {
  min-width: 0;
  border-left: 2px solid rgba(21, 17, 17, 0.14);
  padding-left: 10px;
}

.leaderboard-totals dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.leaderboard-totals dd {
  margin: 5px 0 0;
  color: var(--ink);
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 950;
  line-height: 1;
}

.leaderboard-signal-total dd {
  display: flex;
}

.leaderboard-signal-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--field);
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 5px 9px;
  font-size: 18px;
  font-weight: 950;
  line-height: 1;
  cursor: pointer;
}

.leaderboard-signal-button:hover {
  border-color: var(--pink);
  transform: translate(-1px, -1px);
}

.leaderboard-signal-button .favorite-icon path {
  fill: var(--yellow);
}

.leaderboard-signal-button .heart-icon path {
  fill: var(--pink);
}

.leaderboard-drop-row {
  grid-template-columns: 86px minmax(240px, 1fr) minmax(360px, 0.9fr);
}

.leaderboard-drop-main {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.leaderboard-drop-thumb {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(244, 200, 79, 0.82), rgba(240, 68, 155, 0.28)),
    var(--field);
  background-position: center;
  background-size: cover;
  color: var(--ink);
  font-size: 16px;
  font-weight: 950;
  cursor: pointer;
}

.leaderboard-drop-thumb[data-has-image="true"] {
  color: transparent;
}

.leaderboard-drop-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.leaderboard-drop-copy .mini-button {
  width: max-content;
  min-height: 30px;
  padding: 0 10px;
  font-size: 12px;
}

.leaderboard-drop-title,
.leaderboard-drop-artist {
  width: fit-content;
  max-width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

.leaderboard-drop-title {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: clamp(19px, 2.2vw, 28px);
  font-weight: 950;
  line-height: 1.05;
}

.leaderboard-drop-artist {
  color: var(--green-dark);
  font-size: 13px;
  font-weight: 950;
  line-height: 1.1;
  text-decoration: underline;
  text-transform: uppercase;
}

.leaderboard-drop-totals {
  align-items: start;
  grid-template-columns: minmax(150px, 0.9fr) minmax(110px, 0.7fr) minmax(104px, auto);
  justify-items: start;
  column-gap: 16px;
}

.leaderboard-drop-totals .leaderboard-drop-status-stat {
  min-width: 150px;
}

.leaderboard-drop-status-value {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

.leaderboard-drop-eligibility-wrap {
  grid-column: 1 / -1;
  width: 100%;
}

.leaderboard-drop-eligibility-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  margin-top: 7px;
}

.leaderboard-eligibility-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  border: 2px solid rgba(21, 17, 17, 0.18);
  border-radius: 999px;
  background: var(--field);
  color: var(--muted);
  padding: 4px 10px 4px 5px;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  max-width: 100%;
  min-width: 0;
  white-space: nowrap;
}

.leaderboard-eligibility-pill > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.leaderboard-eligibility-pill.is-eligible {
  border-color: rgba(20, 156, 146, 0.42);
  background: rgba(20, 156, 146, 0.08);
  color: var(--green-dark);
}

.leaderboard-eligibility-pill.is-blocked {
  border-color: rgba(240, 68, 155, 0.48);
  background: rgba(240, 68, 155, 0.08);
  color: var(--pink);
}

.leaderboard-eligibility-pill.is-closed {
  border-color: rgba(21, 17, 17, 0.22);
  background: rgba(21, 17, 17, 0.05);
  color: var(--muted);
}

.leaderboard-eligibility-pill.is-unknown {
  border-color: rgba(21, 17, 17, 0.22);
  background: rgba(21, 17, 17, 0.05);
  color: var(--muted);
}

.leaderboard-eligibility-icon {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 999px;
  background: rgba(21, 17, 17, 0.14);
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
}

.eligibility-spinner {
  display: inline-block;
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 999px;
  animation: eligibility-spin 700ms linear infinite;
}

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

.leaderboard-eligibility-pill.is-eligible .leaderboard-eligibility-icon {
  background: var(--green);
  color: var(--ink);
}

.leaderboard-eligibility-pill.is-blocked .leaderboard-eligibility-icon {
  background: var(--pink);
  color: var(--white);
}

.leaderboard-eligibility-pill.is-closed .leaderboard-eligibility-icon {
  background: rgba(21, 17, 17, 0.14);
  color: var(--ink);
}

.leaderboard-eligibility-pill.is-unknown .leaderboard-eligibility-icon {
  background: rgba(21, 17, 17, 0.14);
  color: var(--ink);
}

.leaderboard-eligibility-popover {
  position: relative;
  display: inline-flex;
}

.leaderboard-eligibility-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  border: 2px solid rgba(20, 156, 146, 0.42);
  border-radius: 999px;
  background: rgba(20, 156, 146, 0.08);
  color: var(--green-dark);
  padding: 4px 10px 4px 5px;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.leaderboard-eligibility-check:hover,
.leaderboard-eligibility-check[aria-expanded="true"] {
  border-color: var(--green-dark);
  background: rgba(20, 156, 146, 0.14);
}

.leaderboard-eligibility-check .leaderboard-eligibility-icon {
  background: var(--green);
  color: var(--ink);
}

.leaderboard-eligibility-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 18;
  display: grid;
  width: max-content;
  min-width: 230px;
  max-width: min(340px, calc(100vw - 32px));
  gap: 7px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 4px 4px 0 var(--pink);
  padding: 8px;
}

.leaderboard-eligibility-menu[hidden] {
  display: none;
}

.leaderboard-eligibility-detail {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  border: 2px solid rgba(21, 17, 17, 0.14);
  border-radius: 8px;
  background: var(--field);
  padding: 7px;
}

.leaderboard-eligibility-detail.is-eligible {
  border-color: rgba(20, 156, 146, 0.38);
  background: rgba(20, 156, 146, 0.08);
}

.leaderboard-eligibility-detail.is-blocked {
  border-color: rgba(240, 68, 155, 0.38);
  background: rgba(240, 68, 155, 0.08);
}

.leaderboard-eligibility-detail.is-closed {
  border-color: rgba(21, 17, 17, 0.18);
  background: rgba(21, 17, 17, 0.05);
}

.leaderboard-eligibility-detail.is-eligible .leaderboard-eligibility-icon {
  background: var(--green);
  color: var(--ink);
}

.leaderboard-eligibility-detail.is-blocked .leaderboard-eligibility-icon {
  background: var(--pink);
  color: var(--white);
}

.leaderboard-eligibility-detail.is-closed .leaderboard-eligibility-icon {
  background: rgba(21, 17, 17, 0.14);
  color: var(--ink);
}

.leaderboard-eligibility-detail-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.leaderboard-eligibility-detail-copy strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.leaderboard-eligibility-detail-copy small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.15;
}

.public-profile-page .workspace {
  width: 100%;
  max-width: none;
  padding-inline: clamp(16px, 3vw, 48px);
}

.public-profile-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-end;
  width: 100%;
  padding-top: 0;
}

.public-profile-nav-stack {
  position: relative;
  z-index: 8;
  display: grid;
  justify-items: end;
  gap: 8px;
  width: 100%;
}

.public-profile-nav-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.public-wallet-status {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--field);
  box-shadow: 2px 2px 0 var(--yellow);
  color: var(--ink);
  padding: 0 11px;
  font-size: 12px;
  font-weight: 950;
}

.public-wallet-connect,
.public-wallet-signin.mini-button {
  background: var(--yellow);
  color: var(--ink);
  min-height: 42px;
  border-color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  padding-inline: 16px;
}

.public-profile-page .public-wallet-connect {
  background: var(--yellow);
  color: var(--ink);
}

.public-profile-edit {
  min-height: 42px;
  border-color: var(--teal);
  background: var(--field);
  box-shadow: 3px 3px 0 var(--teal);
}

.public-profile-edit-panel {
  display: grid;
  gap: 16px;
  margin-top: clamp(12px, 2.5vw, 22px);
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 8px 8px 0 var(--pink);
}

.public-profile-edit-panel[hidden] {
  display: none;
}

.public-profile-edit-heading,
.public-profile-edit-link-heading {
  align-items: start;
}

.public-profile-edit-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.public-profile-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.public-profile-edit-grid label,
.public-profile-edit-link-fields label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.public-profile-edit-grid input,
.public-profile-edit-grid textarea,
.public-profile-edit-link-fields input,
.public-profile-edit-link-fields select {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  border: 2px solid rgba(21, 17, 17, 0.28);
  border-radius: 8px;
  background: var(--field);
  color: var(--ink);
  padding: 8px 10px;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
}

.public-profile-edit-grid textarea {
  resize: vertical;
}

.public-profile-edit-grid .wide-field,
.public-profile-edit-link-fields .wide-field {
  grid-column: 1 / -1;
}

.public-profile-hero {
  display: grid;
  gap: clamp(18px, 3vw, 24px);
  align-items: start;
}

.public-profile-hero.has-link-stack {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
}

.public-profile-hero.link-first-profile {
  grid-template-columns: 1fr;
}

.public-profile-shell {
  display: grid;
  gap: clamp(18px, 3vw, 30px);
  padding: clamp(14px, 3vw, 28px) 0 20px;
}

.public-profile-hero-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 390px);
  align-items: center;
  gap: clamp(18px, 4vw, 48px);
}

.public-profile-shell .profile-identity {
  grid-template-columns: clamp(128px, 16vw, 188px) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 44px);
  align-items: center;
}

.public-profile-shell .feed-profile-avatar {
  width: 100%;
  max-width: 188px;
}

.public-profile-shell .profile-title-block {
  align-content: center;
  min-width: 0;
}

.public-profile-shell .profile-title-block h1 {
  max-width: 780px;
  font-size: clamp(42px, 6.2vw, 76px);
  line-height: 0.96;
}

.public-profile-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.public-profile-title-row h1 {
  margin: 0;
}

.public-profile-follow {
  min-height: 42px;
  border-radius: 999px;
}

.public-profile-title-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.public-profile-favorite {
  min-height: 42px;
  border-radius: 999px;
}

.public-profile-shell .profile-public-actions {
  margin-top: 6px;
}

.profile-wallet-copy {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--field);
  color: var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  cursor: pointer;
}

.profile-wallet-copy svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.profile-wallet-copy.copied {
  background: var(--yellow);
}

.profile-role-panel {
  --profile-role-card-min: 138px;
  display: grid;
  gap: 10px;
  width: max-content;
  min-width: 0;
  margin-top: 12px;
  max-width: 100%;
}

.profile-role-heading {
  margin: 0;
}

.profile-role-badges {
  display: grid;
  grid-template-columns: repeat(3, minmax(var(--profile-role-card-min), 1fr));
  gap: 8px;
  width: 100%;
}

.profile-role-count-1 .profile-role-badges {
  grid-template-columns: minmax(var(--profile-role-card-min), 1fr);
}

.profile-role-count-2 .profile-role-badges {
  grid-template-columns: repeat(2, minmax(var(--profile-role-card-min), 1fr));
}

.profile-role-count-3 .profile-role-badges {
  grid-template-columns: repeat(3, minmax(var(--profile-role-card-min), 1fr));
}

.profile-role-badge {
  display: grid;
  gap: 2px;
  min-width: 138px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--field);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 9px 11px;
}

.profile-role-badge span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.profile-role-badge .profile-role-name {
  color: var(--ink);
  font-size: 18px;
  font-weight: 950;
  line-height: 1.05;
  text-transform: none;
}

.profile-role-badge strong {
  color: var(--ink);
  font-size: 18px;
  font-weight: 950;
  line-height: 1.05;
}

.profile-role-badge small,
.profile-role-badge small a {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.15;
  text-decoration: none;
}

.profile-role-stats-loading {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.profile-role-stats-spinner {
  display: inline-block;
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 999px;
  animation: eligibility-spin 700ms linear infinite;
}

.profile-role-badge .profile-role-detail {
  font-size: 11px;
  font-weight: 800;
}

.profile-role-badge.role-creator {
  background: rgba(248, 201, 75, 0.28);
}

.profile-role-badge.role-collector {
  background: rgba(20, 156, 146, 0.14);
}

.profile-role-badge.role-curator {
  background: rgba(240, 68, 155, 0.12);
}

.profile-role-mix {
  display: grid;
  gap: 5px;
  width: 100%;
}

.profile-role-mix-bar {
  display: flex;
  overflow: hidden;
  width: 100%;
  height: 14px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--field);
  box-shadow: 2px 2px 0 var(--ink);
}

.profile-role-mix-row {
  display: flex;
  align-items: center;
  gap: 7px;
}

.profile-role-mix-row .profile-role-mix-bar {
  flex: 1 1 auto;
}

.profile-role-mix-spinner {
  color: var(--muted);
}

.profile-role-mix-bar span {
  min-width: 3px;
  height: 100%;
}

.role-mix-creator {
  background: var(--yellow);
}

.role-mix-collector {
  background: var(--teal);
}

.role-mix-curator {
  background: var(--pink);
}

.profile-role-mix p {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.public-open-studio,
.public-wallet-connect,
.public-profile-save-top {
  width: fit-content;
  min-width: min(100%, 220px);
  min-height: 46px;
  padding-inline: 18px;
}

.public-profile-search {
  position: relative;
  width: min(100%, 320px);
}

.public-profile-search input {
  width: 100%;
  min-height: 42px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--field);
  box-shadow: 3px 3px 0 var(--ink);
  color: var(--ink);
  padding: 0 12px;
  font-size: 14px;
  font-weight: 900;
}

.public-profile-search-results {
  position: absolute;
  z-index: 12;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  gap: 6px;
  width: min(100vw - 32px, 360px);
  max-height: 320px;
  overflow-y: auto;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 5px 5px 0 var(--pink);
  padding: 8px;
}

.public-profile-search-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
  border: 2px solid rgba(21, 17, 17, 0.16);
  border-radius: 8px;
  background: var(--field);
  color: var(--ink);
  padding: 7px;
  text-decoration: none;
}

.public-profile-search-row strong,
.public-profile-search-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.public-profile-search-row strong {
  font-size: 14px;
  font-weight: 950;
}

.public-profile-search-row small,
.public-profile-search-empty {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.public-profile-search-empty {
  margin: 0;
  padding: 8px;
}

.public-profile-shell .feed-profile-stats {
  margin-top: 0;
  border-top: 2px solid rgba(21, 17, 17, 0.2);
  padding-top: 18px;
  grid-template-columns: repeat(5, minmax(84px, 1fr));
}

.public-profile-shell .feed-profile-stats div {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 6px;
  text-align: center;
}

.public-profile-shell .collected-stat-value,
.feed-profile-stats .collected-stat-value {
  justify-items: center;
}

.public-profile-shell .profile-stats-note {
  text-align: center;
}

.public-profile-signal-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.public-profile-signal {
  display: inline-grid;
  justify-items: center;
  gap: 3px;
  min-width: 58px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--field);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 8px 10px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 950;
  line-height: 1;
  cursor: pointer;
}

button.public-profile-signal {
  appearance: none;
  font-family: inherit;
}

.public-profile-signal:hover,
.public-profile-signal:focus-visible {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--ink);
}

.public-profile-signal svg {
  width: 22px;
  height: 22px;
  fill: transparent;
  stroke: var(--ink);
  stroke-linejoin: round;
  stroke-width: 2.7px;
}

.public-profile-signal .favorite-icon path {
  fill: var(--yellow);
}

.public-profile-signal .heart-icon path {
  fill: var(--pink);
}

.home-profile-signal-row .public-profile-signal.social-stat-button {
  width: auto;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.public-link-stack-panel {
  display: grid;
  align-content: start;
  gap: 14px;
  margin-top: clamp(18px, 5vw, 42px);
  box-shadow: none !important;
  min-height: 0;
  height: 100%;
  overflow: auto;
}

.profile-dashboard .public-link-stack-panel {
  margin-top: 0;
}

.public-link-stack-solo {
  margin-top: 0;
}

.public-link-stack-grid {
  display: grid;
  gap: 10px;
}

.public-link-stack-solo .public-link-stack-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.public-link-stack-panel .public-link-stack-grid {
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}

.public-link-stack-grid > .public-link-tile {
  width: 100%;
  box-shadow: none !important;
}

.public-link-tile {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  min-height: 64px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--field);
  box-shadow: none;
  color: var(--ink);
  padding: 8px;
  text-decoration: none;
  overflow: hidden;
}

.public-link-tile:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--pink);
}

.public-profile-page .profile-curation-artist,
.public-profile-page .profile-curation-artist-line {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.public-profile-page .profile-curation-artist {
  display: inline;
  padding: 0;
}

.profile-preview-link-tile {
  cursor: grab;
}

.public-profile-edit-link-panel {
  overflow: visible;
}

.public-profile-edit-link-heading .mini-button {
  flex: 0 0 auto;
}

.public-profile-edit-link-grid {
  gap: 12px;
}

.public-profile-edit-link-tile,
.profile-preview-link-tile.public-profile-edit-link-tile:not(.expanded) {
  grid-template-columns: 1fr;
  align-items: stretch;
  min-height: 0;
  padding: 50px 12px 42px;
  overflow: visible;
}

.public-profile-edit-link-tile.expanded {
  min-height: 0;
}

.public-profile-edit-link-fields {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(88px, 0.45fr) minmax(0, 1fr);
  gap: 10px;
}

.public-profile-edit-hint {
  margin: 0;
}

.profile-preview-link-tile:not(.expanded) {
  padding-left: 46px;
}

.profile-preview-link-tile.dragging {
  opacity: 0.62;
}

.profile-preview-link-tile.drag-over {
  outline: 4px solid var(--teal);
  outline-offset: 4px;
}

.profile-preview-drop-grid {
  border-radius: 10px;
  outline: 2px dashed rgba(20, 156, 146, 0.55);
  outline-offset: 5px;
}

.profile-preview-link-tile.drop-before::before,
.profile-preview-link-tile.drop-after::after {
  content: "";
  position: absolute;
  z-index: 4;
  left: 8px;
  right: 8px;
  height: 5px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--teal);
  box-shadow: 2px 2px 0 var(--ink);
}

.profile-preview-link-tile.drop-before::before {
  top: -10px;
}

.profile-preview-link-tile.drop-after::after {
  bottom: -10px;
}

.profile-preview-link-remove,
.profile-preview-drag-handle,
.profile-preview-large-toggle {
  position: absolute;
  z-index: 3;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--field);
  box-shadow: 2px 2px 0 var(--ink);
  color: var(--ink);
  font-weight: 950;
}

.profile-preview-drag-handle {
  left: 8px;
  top: 8px;
  display: inline-grid;
  place-items: center;
  gap: 3px;
  width: 30px;
  height: 30px;
  padding: 0;
  cursor: grab;
}

.profile-preview-drag-handle span {
  display: block;
  width: 14px;
  height: 2px;
  border-radius: 999px;
  background: var(--ink);
}

.profile-preview-link-remove {
  top: 8px;
  right: 8px;
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  color: var(--pink);
  cursor: pointer;
}

.profile-preview-large-toggle {
  left: 8px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 0 8px;
  font-size: 11px;
  cursor: pointer;
}

.profile-preview-large-toggle input {
  width: 14px;
  height: 14px;
  min-height: 14px;
  accent-color: var(--yellow);
}

.public-link-tile.expanded {
  align-content: end;
  min-height: 156px;
}

.public-link-stack-solo .public-link-tile {
  min-height: 76px;
  grid-template-columns: 68px minmax(0, 1fr);
  align-content: center;
  justify-items: stretch;
  text-align: left;
}

.public-link-stack-solo .public-link-tile.expanded {
  grid-column: auto;
  grid-template-columns: 1fr;
  align-content: center;
  justify-items: center;
  text-align: center;
  min-height: 220px;
}

.public-profile-dashboard {
  align-items: stretch;
  grid-auto-rows: clamp(620px, 68vh, 760px);
}

.public-profile-dashboard > .profile-dashboard-section {
  min-height: 0;
  height: 100%;
  max-height: none;
  overflow-y: auto;
}

.public-profile-dashboard > .profile-dashboard-section {
  align-self: stretch;
  margin-top: 0;
}

.public-profile-dashboard > .panel.profile-dashboard-section {
  margin-top: 0;
}

.profile-activity-link {
  grid-area: body;
  display: grid;
  align-items: center;
  align-self: center;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.profile-activity-link:hover strong,
.profile-activity-link:focus-visible strong {
  color: var(--green-dark);
  text-decoration: underline;
}

.profile-activity-follow {
  min-height: 28px;
  border-radius: 999px;
  padding: 0 9px;
  font-size: 11px;
  line-height: 1;
  box-shadow: 2px 2px 0 var(--ink);
}

.public-profile-page .profile-activity-main {
  display: grid;
  gap: 3px;
}

.public-profile-page .profile-activity-main strong {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.1;
}

.public-profile-page .profile-activity-main small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.public-profile-drop-card .public-heart-static {
  gap: 4px;
  text-decoration: none;
}

.public-profile-drop-card .public-heart-static .heart-icon path {
  fill: var(--pink);
}

.public-card-follow.mini-button {
  border-radius: 999px;
}

.public-curation-exclude {
  display: none !important;
}

.public-profile-editing .public-curation-exclude {
  display: inline-flex !important;
}

.public-card-favorite {
  gap: 4px;
}

.public-heart-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  background: rgba(21, 17, 17, 0.35);
  padding: clamp(12px, 3vw, 28px);
}

.public-heart-modal[hidden] {
  display: none;
}

.public-heart-modal-panel {
  display: grid;
  align-content: start;
  gap: 14px;
  width: min(100%, 520px);
  max-height: calc(100vh - 56px);
  overflow: auto;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 8px 8px 0 var(--pink);
  padding: clamp(14px, 3vw, 22px);
}

.public-heart-modal-list {
  display: grid;
  gap: 8px;
}

.public-heart-person {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 2px solid rgba(21, 17, 17, 0.18);
  border-radius: 8px;
  background: var(--field);
  color: var(--ink);
  padding: 8px;
  text-decoration: none;
}

.public-heart-person strong,
.public-heart-person small {
  display: block;
  overflow-wrap: anywhere;
}

.public-heart-person strong {
  font-size: 14px;
  font-weight: 950;
  line-height: 1.1;
}

.public-heart-person small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.public-link-media {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  opacity: 0.88;
}

.public-link-tile.has-media:not(.expanded) .public-link-media {
  position: relative;
  inset: auto;
  z-index: 1;
  width: 56px;
  height: 56px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  opacity: 1;
}

.public-link-tile.has-media:not(.expanded) .public-link-media::after {
  content: none;
}

.public-link-tile.has-media .public-link-icon {
  display: none;
}

.public-link-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(253, 248, 239, 0.2), rgba(253, 248, 239, 0.9));
}

.public-link-icon,
.public-link-copy {
  position: relative;
  z-index: 1;
}

.public-link-icon {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
}

.public-link-stack-solo .public-link-icon {
  width: 56px;
  height: 56px;
  font-size: 12px;
}

.public-link-stack-solo .public-link-tile.expanded .public-link-icon {
  width: 58px;
  height: 58px;
  font-size: 13px;
}

.public-link-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.public-link-copy strong {
  overflow-wrap: anywhere;
  font-size: 15px;
  font-weight: 950;
  line-height: 1.05;
}

.public-link-copy small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.18;
}

.feed-artist-link {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  text-align: left;
  text-decoration: none;
}

.feed-artist-link:hover {
  color: var(--green-dark);
  text-decoration: underline;
}

.feed-artist-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.feed-artist-row .feed-artist-link {
  margin: 0;
}

.feed-artist-row .mini-button {
  min-height: 30px;
  border-radius: 999px;
  box-shadow: none;
  padding: 0 9px;
  font-size: 12px;
}

.feed-artist-row .follow-check-icon {
  width: 16px;
  height: 16px;
}

.feed-artist-favorite {
  appearance: none;
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--field);
  color: var(--ink);
  box-shadow: none;
  cursor: pointer;
  padding: 0;
}

.feed-artist-favorite:hover {
  border-color: var(--pink);
  transform: translate(-1px, -1px);
  box-shadow: none;
}

.feed-artist-favorite:disabled {
  cursor: wait;
  opacity: 0.7;
}

.feed-artist-favorite .favorite-icon {
  width: 18px;
  height: 18px;
}

.feed-card {
  position: relative;
  min-width: 0;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: none;
  overflow: hidden;
}

.feed-card-media {
  position: relative;
  display: block;
  width: 100%;
  min-height: 210px;
  aspect-ratio: 1.14;
  border-bottom: 2px solid var(--ink);
  background:
    linear-gradient(135deg, rgba(244, 200, 79, 0.82), rgba(240, 68, 155, 0.28)),
    var(--field);
  background-position: center;
  background-size: cover;
}

button.feed-card-media {
  appearance: none;
  border: 0;
  border-bottom: 2px solid var(--ink);
  padding: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

button.feed-card-media:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: -5px;
}

.feed-status-badge {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--yellow);
  box-shadow: none;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.feed-status-badge::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
}

.feed-status-badge[data-state="completed"]::after {
  background: var(--muted);
}

.feed-status-badge[data-state="upcoming"]::after {
  background: var(--yellow);
}

.feed-chain-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: inline-grid;
  place-items: center;
  min-width: 38px;
  min-height: 30px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--field);
  color: var(--ink);
  box-shadow: none;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
}

.feed-card-body {
  display: grid;
  gap: 9px;
  padding: 11px;
}

.feed-card-body h3 {
  margin-top: 2px;
  font-size: clamp(19px, 2.1vw, 25px);
  overflow-wrap: anywhere;
}

.feed-card-body .field-note {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.feed-card-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 6px;
  margin: 0;
}

.feed-card-stats div {
  min-width: 0;
  border: 2px solid rgba(21, 17, 17, 0.28);
  border-radius: 6px;
  background: var(--field);
  padding: 6px;
}

.feed-card-phases {
  display: grid;
  gap: 6px;
  border: 2px solid rgba(21, 17, 17, 0.18);
  border-radius: 6px;
  background: rgba(255, 249, 239, 0.62);
  padding: 7px;
}

.feed-phase-heading,
.feed-phase-more {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  line-height: 1.15;
  text-transform: uppercase;
}

.feed-phase-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  min-width: 0;
}

.feed-phase-main {
  display: grid;
  flex: 1 1 128px;
  gap: 1px;
  min-width: 0;
}

.feed-phase-main strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feed-phase-main small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feed-phase-eligibility {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  justify-content: center;
  gap: 4px;
  max-width: 100%;
  min-width: 0;
  min-height: 24px;
  border: 2px solid rgba(21, 17, 17, 0.28);
  border-radius: 999px;
  background: var(--field);
  color: var(--muted);
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 950;
  line-height: 1.08;
  overflow-wrap: anywhere;
  text-align: center;
  text-transform: uppercase;
  white-space: normal;
}

.feed-phase-eligibility.is-eligible,
.feed-phase-eligibility.is-public {
  border-color: rgba(13, 111, 103, 0.38);
  background: rgba(20, 156, 146, 0.08);
  color: var(--green-dark);
}

.feed-phase-eligibility.is-blocked {
  border-color: rgba(240, 68, 155, 0.42);
  background: rgba(240, 68, 155, 0.08);
  color: var(--pink);
}

.feed-phase-eligibility.is-closed,
.feed-phase-eligibility.is-unknown {
  border-color: rgba(21, 17, 17, 0.22);
  background: rgba(21, 17, 17, 0.05);
  color: var(--muted);
}

.feed-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.feed-mint-action {
  background: var(--pink);
  color: var(--white);
}

.mini-button.feed-mint-action.is-ready,
.mini-button.feed-mint-action.is-another {
  background: var(--pink);
  color: var(--white);
}

.mini-button.feed-mint-action.is-action-busy,
.mini-button.feed-mint-action.is-minted {
  background: rgba(240, 68, 155, 0.58);
  color: var(--white);
}

.feed-mint-action.is-unavailable,
.feed-mint-action.is-checking {
  background: rgba(21, 17, 17, 0.08);
  color: var(--muted);
}

.feed-mint-action.is-action-busy::after {
  border-color: var(--white);
  border-top-color: transparent;
}

.feed-card .mini-button {
  min-height: 34px;
  border-radius: 7px;
  box-shadow: none;
  padding: 0 9px;
  font-size: 13px;
}

.feed-card .mini-button:hover,
.feed-card .mini-button:focus-visible {
  box-shadow: none;
}

.feed-card .following-toggle {
  gap: 5px;
}

.curation-source-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: -2px;
}

.curation-source-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 2px solid rgba(21, 17, 17, 0.22);
  border-radius: 999px;
  background: var(--field);
  color: var(--green-dark);
  padding: 0 8px;
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.feed-icon-action,
.icon-button {
  display: inline-grid;
  place-items: center;
  width: 36px;
  min-width: 36px;
  padding: 0;
}

.feed-action-icon {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.feed-action-logo {
  display: block;
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.feed-card-eligibility {
  margin: -2px 0 0;
  color: var(--green-dark);
  font-size: 13px;
  font-weight: 950;
  line-height: 1.25;
}

.feed-card-eligibility.is-not-eligible {
  color: var(--pink);
}

.feed-edit-action {
  display: inline-grid;
  place-items: center;
  width: 40px;
  min-width: 40px;
  padding: 0;
}

.feed-edit-action svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.following-toggle {
  gap: 7px;
  background: #eef8f4;
  color: var(--green-dark);
  border-color: var(--green-dark);
  box-shadow: 3px 3px 0 var(--green);
}

.follow-check-icon {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 2px solid var(--green-dark);
  border-radius: 999px;
  background: var(--green);
  color: var(--white);
  flex: 0 0 auto;
}

.follow-check-icon svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.following-toggle:hover {
  background: #e1f5ef;
}

.following-toggle span {
  align-items: center;
  line-height: 1;
}

.compact-feed-card .feed-card-media {
  min-height: 150px;
}

.public-profile-drop-card.compact-feed-card .feed-card-media {
  min-height: 210px;
  aspect-ratio: 1.14;
}

.screen-copy {
  max-width: 780px;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.notice-panel {
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: #eef8f4;
  box-shadow: 5px 5px 0 var(--green);
  padding: 14px;
}

.notice-panel strong {
  color: var(--green-dark);
  font-size: 14px;
}

.notice-panel p {
  margin: 6px 0 0;
  color: var(--text);
  line-height: 1.5;
}

.tutorial-page .workspace {
  width: min(100%, 1040px);
}

.tutorial-hero {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
}

.tutorial-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tutorial-section {
  display: grid;
  gap: 12px;
  margin: 0 0 18px;
}

.tutorial-card {
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 5px 5px 0 var(--green);
  padding: 16px;
}

.tutorial-card h2,
.tutorial-card h3 {
  margin-bottom: 8px;
}

.tutorial-card p,
.tutorial-card li {
  color: var(--muted);
  line-height: 1.55;
}

.filename-match-example {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr);
  gap: 14px;
  align-items: start;
  margin: 16px 0 4px;
}

.filename-match-example.inline-example,
.filename-match-example.faq-example {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 12px 0;
}

.filename-match-example.compact-example {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0;
}

.filename-example-figure {
  min-width: 0;
  margin: 0;
}

.filename-visual {
  position: relative;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--ink);
  box-shadow: 5px 5px 0 var(--yellow);
}

.filename-visual img {
  display: block;
  width: 100%;
  height: auto;
}

.filename-highlight {
  position: absolute;
  z-index: 2;
  border: 3px solid var(--yellow);
  border-radius: 10px;
  box-shadow:
    0 0 0 999px rgba(21, 17, 17, 0.22),
    0 0 0 4px rgba(240, 68, 155, 0.75);
  pointer-events: none;
}

.folder-name-highlight {
  left: 12%;
  top: 41%;
  width: 82%;
  height: 39%;
}

.csv-name-highlight {
  left: 75%;
  top: 19%;
  width: 23%;
  height: 73%;
}

.annotation-pin {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--pink);
  color: var(--white);
  font-size: 14px;
  font-weight: 950;
  box-shadow: 3px 3px 0 var(--yellow);
}

.pin-folder {
  left: 14px;
  top: 14px;
}

.pin-csv {
  right: 14px;
  top: 14px;
}

.filename-example-figure figcaption {
  display: grid;
  gap: 3px;
  margin-top: 10px;
}

.filename-example-figure figcaption strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
}

.filename-example-figure figcaption span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.filename-example-figure code,
.filename-rule-callout code {
  color: var(--ink);
  font-weight: 900;
}

.filename-rule-callout {
  grid-column: 1 / -1;
  margin: 0;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--yellow);
  color: var(--ink);
  padding: 10px 12px;
  font-weight: 800;
  line-height: 1.45;
}

.tutorial-card .filename-rule-callout,
.faq-item .filename-rule-callout {
  color: var(--ink);
}

.filename-rule-callout strong {
  color: var(--pink);
}

.tutorial-card strong {
  color: var(--ink);
}

.tutorial-card ol,
.tutorial-card ul {
  margin: 10px 0 0;
  padding-left: 22px;
}

.tutorial-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.faq-panel {
  display: grid;
  gap: 14px;
}

.faq-search-label {
  max-width: 720px;
}

.faq-list {
  display: grid;
  gap: 18px;
}

.faq-group {
  display: grid;
  gap: 10px;
}

.faq-group h3 {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 950;
  text-transform: uppercase;
}

.faq-item {
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--paper-2);
  box-shadow: 4px 4px 0 var(--ink);
  overflow: hidden;
  transition: box-shadow 160ms ease, transform 160ms ease, background 160ms ease;
}

.faq-item.faq-match {
  background: var(--panel);
  box-shadow: 4px 4px 0 var(--pink);
}

.faq-item summary {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  cursor: pointer;
  list-style: none;
  padding: 12px 14px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
  line-height: 1.25;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  font-size: 18px;
  font-weight: 950;
  line-height: 1;
}

.faq-item[open] summary::after {
  content: "-";
}

.faq-item p {
  margin: 0;
  border-top: 1px solid rgba(32, 26, 24, 0.22);
  padding: 12px 14px 14px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 750;
  line-height: 1.55;
}

.faq-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  border-top: 1px solid rgba(32, 26, 24, 0.14);
  padding: 0 14px 14px;
}

.faq-actions .mini-button {
  min-height: 34px;
  max-width: 100%;
  padding: 7px 12px;
  font-size: 12px;
  line-height: 1.15;
  box-shadow: 2px 2px 0 var(--ink);
  white-space: normal;
}

.faq-actions .mini-button[disabled] {
  cursor: not-allowed;
  border-color: rgba(32, 26, 24, 0.45);
  background: var(--paper);
  color: var(--muted);
  box-shadow: none;
  opacity: 1;
}

.faq-action-note {
  display: none;
}

.platform-admin-workspace {
  display: grid;
  gap: 14px;
}

.platform-admin-gate {
  max-width: 940px;
  margin: 0 auto;
}

.platform-admin-gate .hero-panel {
  align-items: center;
}

.platform-admin-hero {
  max-width: none;
}

.platform-gate-actions {
  margin-top: 16px;
}

.platform-admin-lock-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0;
}

.platform-lock-step {
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 4px 4px 0 var(--ink);
  padding: 14px;
}

.platform-lock-step[data-state="complete"] {
  box-shadow: 4px 4px 0 var(--teal);
}

.platform-lock-step[data-state="active"] {
  box-shadow: 4px 4px 0 var(--pink);
}

.platform-lock-step[data-state="locked"] {
  opacity: 0.58;
}

.platform-lock-step h2 {
  margin: 6px 0 8px;
  font-size: clamp(22px, 3vw, 34px);
}

.platform-otp-actions {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin: 12px 0 8px;
}

.platform-otp-actions input {
  min-height: 42px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  font-size: 18px;
  font-weight: 900;
  padding: 0 10px;
}

.platform-admin-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 4px 4px 0 var(--ink);
  padding: 10px;
  align-items: start;
}

.platform-admin-tab-group {
  display: grid;
  gap: 7px;
  align-content: start;
  border: 1px solid rgba(26, 20, 19, 0.18);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.34);
  padding: 8px;
}

.platform-admin-tab-group p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.platform-admin-tab-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.platform-admin-tab {
  min-height: 31px;
  border: 2px solid var(--ink);
  border-radius: 5px;
  background: var(--field);
  color: var(--ink);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--ink);
}

.platform-admin-tab.active {
  background: var(--ink);
  color: var(--paper);
  box-shadow: 2px 2px 0 var(--pink);
}

.platform-admin-tab:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  box-shadow: none;
}

.platform-admin-panel {
  display: none;
}

.platform-admin-panel.active {
  display: grid;
  gap: 14px;
}

.platform-admin-subsection {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 2px solid rgba(25, 20, 18, 0.14);
}

.platform-admin-subsection h3 {
  margin: 0 0 6px;
  font-size: 18px;
}

.compact-admin-actions {
  flex-wrap: wrap;
  align-items: stretch;
}

.compact-admin-actions .primary-action,
.compact-admin-actions .secondary-action {
  min-height: 34px;
  border-radius: 6px;
  padding: 0 10px;
  font-size: 12px;
  box-shadow: 2px 2px 0 var(--ink);
}

.mission-control-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(280px, 1.1fr);
  gap: 12px;
  align-items: start;
}

.mission-enabled-row {
  margin-top: 10px;
}

.mission-control-help {
  border: 2px dashed var(--ink);
  border-radius: 8px;
  background: var(--paper-2);
  padding: 12px;
}

.mission-control-help p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.4;
}

.mission-control-help p + p {
  margin-top: 8px;
}

.mission-control-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.maintenance-mode-card {
  display: grid;
  gap: 12px;
  border: 3px solid var(--ink);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255, 211, 72, 0.2), var(--panel) 46%, rgba(20, 156, 146, 0.12));
  box-shadow: 5px 5px 0 var(--ink);
  padding: 14px;
}

.maintenance-mode-card[data-maintenance-state="active"] {
  background: linear-gradient(135deg, rgba(239, 61, 154, 0.18), var(--panel) 52%, rgba(255, 211, 72, 0.26));
  box-shadow: 5px 5px 0 var(--pink);
}

.maintenance-mode-heading {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.maintenance-mode-heading h3 {
  margin: 0;
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1;
}

.maintenance-mode-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 86px;
  min-height: 44px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: var(--green);
  color: var(--white);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 0 14px;
  font-size: 14px;
  font-weight: 950;
  text-transform: uppercase;
}

.maintenance-mode-card[data-maintenance-state="active"] .maintenance-mode-badge {
  background: var(--yellow);
  color: var(--ink);
}

.maintenance-mode-fields textarea {
  min-height: 96px;
}

.mission-control-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 4px 4px 0 var(--ink);
  padding: 12px;
}

.mission-control-card[data-mission-state="paused"] {
  box-shadow: 4px 4px 0 var(--pink);
}

.mission-control-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mission-control-card-heading strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
}

.mission-control-card-heading span {
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--green);
  color: var(--white);
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.mission-control-card[data-mission-state="paused"] .mission-control-card-heading span {
  background: var(--yellow);
  color: var(--ink);
}

.mission-control-card p,
.mission-control-card small {
  display: block;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
}

.mission-control-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.mission-control-card-actions .primary-action,
.mission-control-card-actions .secondary-action {
  min-height: 32px;
  border-radius: 6px;
  padding: 0 9px;
  font-size: 12px;
  box-shadow: 2px 2px 0 var(--ink);
}

.platform-card {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.platform-router-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
}

.factory-control-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.factory-control-row input {
  flex: 1 1 320px;
  min-width: min(100%, 260px);
}

.factory-control-row .button-info-pair {
  flex: 0 0 auto;
}

.router-address-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--paper-2);
  box-shadow: 4px 4px 0 var(--yellow);
  padding: 12px;
}

.router-address-card > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.router-address-card span:first-child {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.router-address-card code {
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.router-history-section {
  display: grid;
  gap: 10px;
  border-top: 2px solid rgba(21, 17, 17, 0.16);
  padding-top: 12px;
}

.splitter-ownership-actions {
  align-items: stretch;
}

.platform-handoff-actions {
  align-items: stretch;
  flex-wrap: wrap;
}

.platform-handoff-actions input[type="password"] {
  flex: 1 1 240px;
  min-width: min(240px, 100%);
}

.button-info-pair {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
}

.button-info-pair > .primary-action,
.button-info-pair > .secondary-action {
  min-width: 0;
}

.handoff-flow-list {
  display: grid;
  gap: 8px;
  margin: 12px 0 16px;
  padding: 12px 12px 12px 34px;
  border: 2px solid rgba(21, 17, 17, 0.2);
  border-radius: 8px;
  background: var(--paper-2);
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.handoff-flow-list li::marker {
  color: var(--ink);
  font-weight: 950;
}

.handoff-flow-list.compact-flow {
  margin-top: 10px;
  font-size: 12px;
  gap: 6px;
}

.handoff-checklist {
  display: grid;
  gap: 9px;
}

.handoff-checklist-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 2px solid rgba(21, 17, 17, 0.2);
  border-radius: 8px;
  background: var(--paper-2);
  padding: 11px 12px;
}

.handoff-checklist-row > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.handoff-checklist-row strong {
  font-size: 13px;
  font-weight: 950;
  text-transform: uppercase;
}

.handoff-checklist-row span,
.handoff-checklist-row small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.compact-heading {
  align-items: center;
}

.platform-router-history-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
  min-width: 0;
}

.platform-banner-admin-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.platform-notification-admin-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px;
}

.platform-notification-admin-card {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  min-width: 0;
  border: 2px solid var(--ink);
  border-left: 6px solid var(--pink);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255, 64, 160, 0.09), var(--field) 45%);
  box-shadow: 5px 5px 0 var(--ink);
  padding: 12px;
}

.platform-notification-admin-card[data-status="completed"],
.platform-notification-admin-card[data-status="cancelled"] {
  opacity: 0.72;
  border-left-color: var(--muted);
  box-shadow: 5px 5px 0 var(--muted);
}

.platform-notification-admin-logo {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--white);
}

.platform-notification-admin-copy {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.platform-notification-admin-copy header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.platform-notification-admin-copy header strong {
  overflow-wrap: anywhere;
  font-size: 17px;
  line-height: 1.1;
}

.platform-notification-admin-copy p {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.platform-banner-admin-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--field);
  box-shadow: 5px 5px 0 var(--ink);
  padding: 12px;
}

.platform-banner-admin-card[data-paused="true"] {
  opacity: 0.68;
  box-shadow: 5px 5px 0 var(--muted);
}

.platform-banner-admin-card header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.platform-banner-admin-card strong {
  overflow-wrap: anywhere;
  font-size: 18px;
  line-height: 1.1;
}

.platform-banner-preview {
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--yellow);
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 950;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.platform-banner-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.platform-banner-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.router-history-card {
  min-height: 116px;
}

.router-history-card[data-active="true"] {
  background: var(--yellow);
  box-shadow: 5px 5px 0 var(--pink);
}

.router-history-card .contract-verification-badge {
  justify-self: start;
  width: max-content;
}

.router-history-card .contract-verification-badge,
.router-history-card .contract-verification-badge span {
  color: var(--ink);
}

.factory-history-table {
  min-width: 0;
}

.table-scroll {
  overflow-x: auto;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--field);
}

.table-scroll table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.table-scroll th,
.table-scroll td {
  border-bottom: 1px solid rgba(21, 17, 17, 0.16);
  padding: 9px 10px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
  text-align: left;
  vertical-align: middle;
}

.table-scroll th {
  background: var(--yellow);
  font-weight: 950;
  text-transform: uppercase;
}

.table-scroll tr:last-child td {
  border-bottom: 0;
}

.factory-history-table button {
  max-width: 360px;
  min-height: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--teal);
  padding: 0;
  font: inherit;
  font-weight: 950;
  overflow-wrap: anywhere;
  text-align: left;
}

.platform-referral-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.platform-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.platform-subtab {
  min-height: 34px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper-2);
  box-shadow: 2px 2px 0 var(--ink);
  padding: 0 14px;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
}

.platform-subtab.active {
  background: var(--ink);
  color: var(--paper);
  box-shadow: 2px 2px 0 var(--pink);
}

.platform-referral-grid > .platform-card,
.platform-admin-grid > .panel,
.platform-admin-grid > .platform-card {
  align-self: start;
  box-shadow: none;
}

.platform-referral-grid .platform-audit-list,
.platform-admin-grid .platform-audit-list {
  max-height: 440px;
  overflow-y: auto;
  align-content: start;
  scrollbar-gutter: stable;
}

.platform-referral-grid .platform-audit-card,
.platform-admin-grid .platform-audit-card {
  align-self: start;
  box-shadow: none;
}

.referral-redemption-row {
  display: grid;
  grid-template-columns: minmax(110px, auto) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 0;
  padding: 8px 10px;
}

.referral-redemption-row > strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.referral-redemption-status {
  justify-self: start;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--yellow);
  padding: 2px 7px;
  color: var(--ink);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
  white-space: nowrap;
}

.referral-redemption-row .field-note {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.platform-audit-list.compact-list {
  display: grid;
  gap: 10px;
}

.referral-code-card .small-action {
  min-height: 28px;
  padding: 0 10px;
  font-size: 11px;
}

.referral-leader-card dl {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.owner-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper-2);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 0 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.owner-pill[data-state="owner"] {
  background: var(--green);
  color: var(--white);
}

.owner-pill[data-state="readonly"] {
  background: var(--yellow);
  color: var(--ink);
}

.owner-pill[data-state="warning"] {
  background: var(--pink);
  color: var(--white);
}

.platform-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.platform-stat-grid div,
.platform-stat-grid button {
  min-width: 0;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 4px 4px 0 var(--ink);
  padding: 12px;
}

.platform-stat-grid button {
  display: grid;
  gap: 8px;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.platform-stat-grid button:hover,
.platform-stat-grid button.active {
  background: var(--yellow);
  transform: translate(-1px, -1px);
}

.platform-stat-grid dd {
  font-size: clamp(20px, 2.4vw, 34px);
  line-height: 1;
}

.platform-stat-grid .stat-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.platform-stat-grid .stat-value {
  color: var(--ink);
  font-size: clamp(20px, 2.4vw, 34px);
  line-height: 1;
}

.compact-stats dd {
  font-size: clamp(18px, 2vw, 26px);
}

.factory-flow-list {
  display: grid;
  gap: 8px;
  margin: 10px 0 14px;
  padding: 12px 12px 12px 34px;
  border: 2px solid rgba(21, 17, 17, 0.2);
  border-radius: 8px;
  background: var(--paper-2);
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.factory-flow-list li::marker {
  color: var(--ink);
  font-weight: 950;
}

.factory-status-grid {
  margin: 12px 0 16px;
}

.factory-status-grid dd {
  display: flex;
  align-items: center;
  min-height: 34px;
  color: var(--ink);
  font-size: clamp(14px, 1.25vw, 19px);
  overflow-wrap: anywhere;
}

.factory-status-grid .owner-pill {
  font-size: 13px;
  white-space: nowrap;
}

.factory-runtime-list {
  margin-top: 14px;
}

.factory-runtime-list table span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.compact-stats .stat-value {
  font-size: clamp(18px, 2vw, 26px);
}

.terminal-status {
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: #050505;
  box-shadow: 4px 4px 0 var(--pink);
  padding: 12px;
  color: var(--pink);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.45;
}

.platform-admin-grid {
  align-items: start;
}

#opsDashboardLists {
  align-items: stretch;
  gap: 18px;
}

#opsDashboardLists > .platform-card {
  height: 100%;
  align-content: start;
}

#opsDashboardLists .panel-heading {
  align-items: flex-start;
}

#opsDashboardLists .platform-audit-list {
  margin-top: 0;
}

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

.split-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--field);
  padding: 10px;
}

.split-row code {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-weight: 850;
}

.split-row strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--yellow);
  padding: 0 10px;
  color: var(--ink);
  font-size: 12px;
  white-space: nowrap;
}

.split-status.is-error {
  color: #d91f43;
  font-weight: 950;
}

.report-export-actions {
  flex-wrap: wrap;
}

.platform-stats-chart {
  max-width: 100%;
  overflow-x: auto;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--field);
  box-shadow: 4px 4px 0 var(--ink);
}

.platform-stats-chart svg {
  display: block;
  width: 100%;
  min-width: 640px;
  height: auto;
}

.stats-chart-plot {
  fill: var(--paper);
}

.stats-chart-grid {
  stroke: rgba(21, 17, 17, 0.18);
  stroke-width: 1;
}

.stats-chart-axis {
  stroke: var(--ink);
  stroke-width: 2;
}

.stats-chart-area {
  fill: rgba(236, 59, 150, 0.2);
}

.stats-chart-line {
  fill: none;
  stroke: var(--pink);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 5;
}

.stats-chart-dots circle {
  fill: var(--yellow);
  stroke: var(--ink);
  stroke-width: 2;
}

.stats-chart-label {
  fill: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.platform-stats-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.stats-data-table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 2px solid var(--ink);
  border-radius: 8px;
  overflow: hidden;
  background: var(--field);
  box-shadow: 4px 4px 0 var(--ink);
}

.stats-data-table th,
.stats-data-table td {
  border-right: 1px solid rgba(21, 17, 17, 0.18);
  border-bottom: 1px solid rgba(21, 17, 17, 0.14);
  padding: 10px;
  font-size: 12px;
  font-weight: 850;
  text-align: left;
  white-space: nowrap;
}

.stats-data-table th {
  background: var(--yellow);
  color: var(--ink);
  font-weight: 950;
  text-transform: uppercase;
}

.traffic-data-table td {
  vertical-align: middle;
}

.traffic-data-table th,
.traffic-data-table td {
  padding: 7px 8px;
  font-size: 11px;
  line-height: 1.25;
}

.traffic-data-table td:first-child,
.traffic-route-cell {
  min-width: 230px;
  white-space: normal;
}

.traffic-data-table td:first-child span,
.traffic-data-table td:nth-child(2) span,
.traffic-data-table td:nth-child(4) span,
.traffic-data-table td:nth-child(5) span,
.traffic-data-table td:nth-child(6) span,
.traffic-data-table td:nth-child(7) span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.traffic-provider-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(160px, 1fr));
  gap: 8px;
  margin: 0 0 10px;
}

.traffic-provider-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 8px;
  align-items: start;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--field);
  box-shadow: 3px 3px 0 var(--teal);
  min-width: 0;
  overflow: hidden;
  padding: 8px;
}

.traffic-provider-card dt {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.traffic-provider-card dd {
  margin: 2px 0 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
  line-height: 1.05;
  min-width: 0;
  overflow-wrap: anywhere;
}

.traffic-provider-card dd small,
.platform-stat-grid dd small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.2;
}

.traffic-provider-card p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.25;
  min-width: 0;
  overflow-wrap: anywhere;
}

.traffic-cache-summary {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.traffic-cache-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  min-width: 0;
}

.traffic-cache-legend {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.2;
}

.traffic-provider-card .owner-pill {
  min-height: 24px;
  padding: 2px 8px;
  font-size: 10px;
}

.traffic-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
}

.traffic-link-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 3px 10px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: 11px;
  font-weight: 950;
  text-decoration: none;
  text-transform: uppercase;
}

.traffic-link-pill:hover {
  background: var(--green);
}

.traffic-error-review {
  display: grid;
  gap: 8px;
  margin: 10px 0;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 4px 4px 0 var(--yellow);
  overflow: hidden;
  padding: 10px;
}

.traffic-error-review-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.traffic-error-review-head dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.traffic-error-review-head dd {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  font-weight: 950;
}

.traffic-error-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.traffic-error-row {
  display: grid;
  gap: 6px;
  min-width: 0;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: var(--field);
  overflow: hidden;
  padding: 8px;
}

.traffic-error-row[data-tone="danger"] {
  border-color: rgba(240, 68, 155, 0.55);
  background: rgba(240, 68, 155, 0.08);
}

.traffic-error-row[data-tone="warning"] {
  border-color: rgba(249, 205, 73, 0.7);
  background: rgba(249, 205, 73, 0.14);
}

.traffic-error-row strong,
.traffic-error-row span:not(.traffic-percent),
.traffic-error-row small,
.traffic-error-row p {
  min-width: 0;
}

.traffic-error-row strong {
  display: block;
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.traffic-error-row span:not(.traffic-percent),
.traffic-error-row small {
  display: block;
  overflow-wrap: anywhere;
}

.traffic-error-row > div:first-child span,
.traffic-error-row small,
.traffic-error-row p {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.25;
}

.traffic-error-row p {
  margin: 0;
}

.traffic-mini-chip {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  margin: 1px 4px 2px 0;
  padding: 1px 7px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--field);
  color: var(--ink);
  font-size: 10px;
  font-weight: 950;
  white-space: nowrap;
}

.traffic-rpc-error-chart {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 10px 0;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--field);
  box-shadow: 4px 4px 0 var(--teal);
  overflow: hidden;
  padding: 10px;
}

.traffic-rpc-error-chart[data-empty="true"] {
  grid-template-columns: 1fr;
}

.traffic-rpc-pie-wrap {
  display: grid;
  justify-items: center;
  gap: 5px;
  min-width: 100px;
}

.traffic-rpc-pie {
  display: grid;
  place-items: center;
  width: 86px;
  aspect-ratio: 1;
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--ink);
}

.traffic-rpc-pie span {
  display: grid;
  place-items: center;
  width: 54px;
  aspect-ratio: 1;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
}

.traffic-rpc-pie-wrap small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
}

.traffic-rpc-legend {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 6px;
  min-width: 0;
}

.traffic-rpc-legend-head {
  grid-column: 1 / -1;
}

.traffic-rpc-legend-head dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.traffic-rpc-legend-head dd {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  font-weight: 950;
}

.traffic-rpc-legend-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  padding: 5px 7px;
}

.traffic-rpc-legend-row strong,
.traffic-rpc-legend-row span:last-child {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 11px;
  font-weight: 950;
}

.traffic-rpc-legend-row span:last-child {
  color: var(--muted);
  white-space: nowrap;
}

.traffic-pie-swatch {
  width: 12px;
  aspect-ratio: 1;
  border: 2px solid var(--ink);
  border-radius: 999px;
}

.traffic-mini-chip[data-tone="ok"] {
  background: rgba(31, 160, 148, 0.16);
}

.traffic-mini-chip[data-tone="warning"] {
  background: rgba(249, 205, 73, 0.3);
}

.traffic-mini-chip[data-tone="danger"] {
  background: rgba(240, 68, 155, 0.18);
}

.traffic-chip-section {
  display: grid;
  gap: 3px;
  margin: 0 0 6px;
}

.traffic-chip-section:last-child {
  margin-bottom: 0;
}

.traffic-chip-section > div {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 0;
}

.traffic-chip-label {
  color: var(--muted);
  font-size: 9px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.traffic-subtle {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
}

.traffic-percent {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  min-height: 22px;
  padding: 1px 8px;
  border: 2px solid currentColor;
  border-radius: 999px;
  background: var(--field);
  color: var(--muted);
  font-size: 13px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.traffic-provider-card .traffic-percent,
.traffic-error-row .traffic-percent {
  line-height: 1.1;
  overflow-wrap: anywhere;
  white-space: normal;
}

.traffic-data-table td .traffic-percent,
.billing-data-table td .traffic-percent,
.traffic-provider-card .traffic-percent,
.platform-stat-grid dd .traffic-percent {
  color: var(--muted);
  font-size: 13px;
  font-weight: 950;
}

.traffic-data-table td .traffic-percent[data-tone="ok"],
.billing-data-table td .traffic-percent[data-tone="ok"],
.traffic-provider-card .traffic-percent[data-tone="ok"],
.platform-stat-grid dd .traffic-percent[data-tone="ok"] {
  background: rgba(31, 160, 148, 0.12);
  color: var(--green-dark);
}

.traffic-data-table td .traffic-percent[data-tone="warning"],
.billing-data-table td .traffic-percent[data-tone="warning"],
.traffic-provider-card .traffic-percent[data-tone="warning"],
.platform-stat-grid dd .traffic-percent[data-tone="warning"] {
  background: rgba(249, 205, 73, 0.28);
  color: #8b5c00;
}

.traffic-data-table td .traffic-percent[data-tone="danger"],
.billing-data-table td .traffic-percent[data-tone="danger"],
.traffic-provider-card .traffic-percent[data-tone="danger"],
.platform-stat-grid dd .traffic-percent[data-tone="danger"] {
  background: rgba(240, 68, 155, 0.12);
  color: var(--pink);
}

.traffic-data-table td .traffic-percent[data-tone="paused"],
.billing-data-table td .traffic-percent[data-tone="paused"],
.traffic-provider-card .traffic-percent[data-tone="paused"],
.platform-stat-grid dd .traffic-percent[data-tone="paused"],
.traffic-data-table td .traffic-percent[data-tone="unset"],
.billing-data-table td .traffic-percent[data-tone="unset"],
.traffic-provider-card .traffic-percent[data-tone="unset"],
.platform-stat-grid dd .traffic-percent[data-tone="unset"] {
  background: rgba(111, 103, 97, 0.12);
  color: var(--muted);
}

.traffic-data-table td .traffic-row-interpretation {
  display: block;
  margin-top: 5px;
  max-width: 260px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.25;
  white-space: normal;
}

.traffic-data-table td .traffic-row-interpretation[data-tone="ok"] {
  color: var(--green-dark);
}

.traffic-data-table td .traffic-row-interpretation[data-tone="warning"] {
  color: #8b5c00;
}

.traffic-data-table td .traffic-row-interpretation[data-tone="danger"] {
  color: var(--pink);
}

.billing-summary-grid dd {
  line-height: 1.08;
}

.billing-data-table td {
  vertical-align: middle;
}

.billing-data-table td span:not(.traffic-percent):not(.billing-dot),
.billing-data-table td small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.billing-product-cell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 3px 8px;
  min-width: 250px;
  white-space: normal;
}

.billing-product-cell strong {
  min-width: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.billing-product-cell small {
  grid-column: 2;
  display: block;
  line-height: 1.2;
}

.billing-dot {
  width: 12px;
  height: 12px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--billing-dot, var(--yellow));
}

.billing-data-table td .traffic-row-interpretation {
  display: block;
  max-width: 310px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.25;
  white-space: normal;
}

.billing-data-table td .traffic-row-interpretation[data-tone="ok"] {
  color: var(--green-dark);
}

.billing-data-table td .traffic-row-interpretation[data-tone="warning"] {
  color: #8b5c00;
}

.billing-data-table td .traffic-row-interpretation[data-tone="danger"] {
  color: var(--pink);
}

.billing-config-card {
  margin-bottom: 10px;
}

.traffic-driver-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin: 2px 4px 2px 0;
  padding: 2px 8px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.traffic-data-table tr[data-traffic-state="warning"] td {
  background: rgba(249, 205, 73, 0.16);
}

.traffic-data-table tr[data-traffic-state="danger"] td,
.traffic-data-table tr[data-traffic-state="paused"] td {
  background: rgba(240, 68, 155, 0.12);
}

.traffic-secondary-stats {
  margin-top: 10px;
}

@media (max-width: 1100px) {
  .traffic-provider-grid {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }

  .traffic-error-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .traffic-rpc-legend {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }
}

.report-line-list,
.report-note-list {
  display: grid;
  gap: 10px;
}

.report-line-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--paper-2);
  box-shadow: 4px 4px 0 var(--ink);
  padding: 12px;
}

.report-line-row div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.report-line-row strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
}

.report-line-row span,
.report-note-list p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.report-line-row code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--yellow);
  padding: 0 12px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
  white-space: nowrap;
}

.platform-audit-card.report-entity-card dl {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.platform-audit-card.report-entity-card code {
  font-size: 12px;
  font-weight: 850;
}

.report-row-pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin: 8px 0 12px;
}

.report-row-pager[hidden] {
  display: none;
}

.report-row-pager span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.report-note-list p {
  border-left: 4px solid var(--pink);
  padding-left: 10px;
}

.platform-source-card {
  display: grid;
  gap: 6px;
  min-height: 132px;
  min-width: 0;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--paper-2);
  box-shadow: 5px 5px 0 var(--ink);
  padding: 12px;
  text-align: left;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.platform-source-card:hover,
.platform-source-card:focus-visible {
  background: var(--yellow);
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 var(--pink);
}

.platform-source-card strong {
  color: var(--ink);
  font-size: 16px;
  font-weight: 950;
  overflow-wrap: anywhere;
  min-width: 0;
}

.platform-source-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.3;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.platform-audit-list {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.platform-audit-card {
  display: grid;
  gap: 8px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--paper-2);
  box-shadow: 4px 4px 0 var(--ink);
  padding: 12px;
}

.platform-audit-card.compact {
  box-shadow: 3px 3px 0 var(--shadow);
}

.platform-audit-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.platform-audit-card-heading strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.platform-audit-card-heading span {
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--yellow);
  padding: 4px 8px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.platform-audit-card code {
  overflow-wrap: anywhere;
}

.runtime-reference-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  text-transform: none;
}

.platform-audit-card-heading .runtime-reference-copy {
  border: 0;
  background: transparent;
  padding: 0;
}

.runtime-reference-copy code {
  max-width: 150px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.runtime-copy-icon {
  width: 30px;
  min-width: 30px;
  height: 30px;
}

.runtime-copy-icon::before,
.runtime-copy-icon::after {
  width: 11px;
  height: 14px;
  border-width: 2px;
}

.runtime-copy-icon::before {
  left: 7px;
  top: 6px;
}

.runtime-copy-icon::after {
  left: 12px;
  top: 11px;
}

.platform-audit-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.platform-audit-card dt,
.platform-audit-card dd {
  margin: 0;
}

.platform-audit-card dt {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.platform-audit-card dd {
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.compact-toggle {
  justify-self: end;
  width: max-content;
}

.d1-browser-table-wrap {
  max-width: 100%;
  overflow: auto;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--field);
  box-shadow: 4px 4px 0 var(--ink);
}

.d1-data-table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--ink);
  font-size: 12px;
}

.d1-data-table th,
.d1-data-table td {
  max-width: 280px;
  border-right: 1px solid rgba(21, 17, 17, 0.2);
  border-bottom: 1px solid rgba(21, 17, 17, 0.16);
  padding: 8px;
  vertical-align: top;
}

.d1-data-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--yellow);
  color: var(--ink);
  font-size: 11px;
  font-weight: 950;
  text-align: left;
  text-transform: uppercase;
}

.d1-data-table td span {
  display: block;
  max-height: 118px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.d1-null {
  color: var(--muted);
  font-style: italic;
}

.d1-cell-input,
.d1-new-cell-input {
  width: 240px;
  min-height: 54px;
  resize: vertical;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  padding: 8px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
}

.d1-row-actions {
  position: sticky;
  right: 0;
  z-index: 1;
  min-width: 150px;
  background: var(--panel);
}

.d1-row-actions .mini-button {
  margin: 2px;
}

.d1-column-filters-panel {
  border: 2px dashed var(--ink);
  border-radius: 8px;
  background: var(--paper-2);
  padding: 10px;
}

.d1-column-filters-panel summary {
  cursor: pointer;
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
  text-transform: uppercase;
}

.d1-column-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.d1-column-filter-grid label {
  display: grid;
  gap: 5px;
}

.d1-column-filter-grid span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.d1-column-filter-grid input {
  min-height: 42px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: var(--field);
  color: var(--ink);
  padding: 8px 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
}

.d1-cleanup-list {
  margin-top: 0;
}

.d1-cleanup-card {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
}

.d1-cleanup-card > :not(.d1-cleanup-select-row) {
  grid-column: 2;
}

.d1-cleanup-select-row {
  grid-row: 1 / span 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 90px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.d1-cleanup-select-row input {
  width: 20px;
  min-width: 20px;
  height: 20px;
  accent-color: var(--pink);
}

.d1-insert-panel {
  border: 2px dashed var(--ink);
  border-radius: 8px;
  background: var(--paper-2);
  padding: 10px;
}

.d1-insert-panel summary {
  cursor: pointer;
  color: var(--ink);
  font-weight: 950;
}

.d1-add-row-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.d1-add-row-list label {
  display: grid;
  gap: 5px;
}

.d1-add-row-list span {
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.d1-add-row-list small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.code-sample {
  display: block;
  overflow-x: auto;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--ink);
  color: var(--yellow);
  padding: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre;
}

.eyebrow {
  margin: 0 0 6px;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  width: fit-content;
  max-width: 100%;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--ink);
  box-shadow: 3px 3px 0 var(--pink);
  color: var(--paper) !important;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--ink);
  letter-spacing: 0;
}

h1 {
  max-width: 820px;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1;
}

h2 {
  max-width: 860px;
  font-size: 24px;
  line-height: 1.18;
}

h3 {
  font-size: 17px;
  line-height: 1.25;
}

.primary-action,
.secondary-action,
.mini-button,
.ghost-link,
.nav-tab,
.admin-view-tab,
.segment,
.step-pill {
  min-height: 40px;
  border-radius: 8px;
  padding: 0 13px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
}

.primary-action,
.secondary-action,
.mini-button,
.ghost-link,
.nav-tab,
.admin-view-tab,
.step-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
}

.primary-action {
  border: 2px solid var(--ink);
  background: var(--pink);
  color: var(--white);
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.template-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  align-self: start;
  min-height: 32px;
  width: fit-content;
  max-width: 100%;
  border-radius: 999px;
  background: var(--yellow) !important;
  color: var(--ink) !important;
  padding: 0 11px;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 3px 3px 0 var(--ink);
}

.tutorial-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  width: fit-content;
  border-radius: 999px;
  background: var(--pink) !important;
  color: var(--white) !important;
  padding: 0 11px;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 3px 3px 0 var(--ink);
}

.secondary-action,
.mini-button,
.ghost-link,
.nav-tab,
.admin-view-tab,
.step-pill {
  border: 2px solid var(--ink);
  background: var(--field);
  color: var(--text);
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.primary-action:hover,
.secondary-action:hover,
.mini-button:hover,
.ghost-link:hover,
.nav-tab:hover,
.admin-view-tab:hover,
.step-pill:hover {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--ink);
}

.primary-action:active,
.secondary-action:active,
.mini-button:active,
.ghost-link:active,
.nav-tab:active,
.admin-view-tab:active,
.step-pill:active,
.template-action:active,
.tutorial-action:active,
.inline-copy-action:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--ink);
}

.heart-toggle,
.favorite-toggle,
.notify-toggle {
  gap: 4px;
}

.notify-toggle {
  background: var(--field);
}

.notify-toggle.active {
  background: var(--light-blue);
  box-shadow: 3px 3px 0 var(--green);
}

.notify-icon {
  width: 18px;
  height: 18px;
  flex: none;
  fill: transparent;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4px;
}

.curation-exclude-toggle {
  background: var(--field);
  color: var(--text);
}

.is-action-busy {
  position: relative;
  color: transparent !important;
  cursor: wait !important;
  opacity: 1 !important;
  pointer-events: none;
  text-shadow: none !important;
}

.is-action-busy > * {
  opacity: 0 !important;
}

.is-action-busy-with-label {
  color: var(--white) !important;
  padding-right: 48px;
}

.is-action-busy-with-label > * {
  opacity: 1 !important;
}

.is-action-busy::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  border: 3px solid var(--ink);
  border-top-color: transparent;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  animation: action-busy-spin 700ms linear infinite;
}

.is-action-busy-with-label::after {
  left: auto;
  right: 18px;
  transform: translateY(-50%);
  animation-name: action-busy-spin-label;
}

.mini-button.is-action-busy::after {
  width: 14px;
  height: 14px;
  border-width: 2px;
}

.primary-action.is-action-busy::after,
.curation-exclude-toggle.is-action-busy::after {
  border-color: var(--white);
  border-top-color: transparent;
}

button.is-action-busy:disabled {
  opacity: 1;
}

@keyframes action-busy-spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes action-busy-spin-label {
  to {
    transform: translateY(-50%) rotate(360deg);
  }
}

.heart-icon,
.favorite-icon {
  width: 18px;
  height: 18px;
  flex: none;
}

.heart-icon path,
.favorite-icon path {
  fill: transparent;
  stroke: var(--ink);
  stroke-linejoin: round;
  stroke-width: 2.8px;
}

.heart-toggle.active .heart-icon path {
  fill: var(--heart-red);
}

.favorite-toggle.active .favorite-icon path {
  fill: var(--yellow);
}

.follow-suggestion-row .suggestion-follow-button.mini-button {
  min-height: 28px;
  border-radius: 999px;
  padding: 0 9px;
  font-size: 11px;
  line-height: 1;
  box-shadow: 2px 2px 0 var(--ink);
}

.follow-suggestion-row .suggestion-follow-button.mini-button:hover {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--ink);
}

.copy-feedback-anchor {
  position: relative;
  overflow: visible;
}

.copied-pop {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 30;
  min-height: 24px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: #f4c84f !important;
  box-shadow: 3px 3px 0 var(--pink);
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 950;
  line-height: 1.1;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 6px);
  transition: opacity 160ms ease, transform 160ms ease;
  white-space: nowrap;
  text-shadow: none;
}

.copied-pop.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.global-copied-pop {
  position: fixed;
  bottom: auto;
  transform: translate(-50%, -100%) translateY(6px);
}

.global-copied-pop.visible {
  transform: translate(-50%, -100%);
}

.ghost-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.nav-tab {
  min-height: 38px;
  white-space: nowrap;
}

.nav-tab.active,
.step-pill.active {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
  box-shadow: 3px 3px 0 var(--pink);
}

.segment {
  min-height: 112px;
  display: grid;
  align-content: start;
  gap: 8px;
  border: 2px solid var(--ink);
  background: var(--paper-2);
  color: var(--text);
  text-align: left;
  box-shadow: 5px 5px 0 var(--ink);
}

.choice-card {
  min-height: 132px;
  display: grid;
  align-content: start;
  gap: 10px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--paper-2);
  color: var(--text);
  padding: 16px;
  text-align: left;
  cursor: pointer;
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.choice-card:hover,
.segment:hover {
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 var(--ink);
}

.choice-card strong {
  color: var(--ink);
  font-size: 20px;
  line-height: 1.15;
}

.choice-card span {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.choice-card.active {
  border-color: var(--ink);
  background: var(--yellow);
  box-shadow: 5px 5px 0 var(--pink);
}

.choice-card.active strong {
  color: var(--ink);
}

.segment strong {
  color: var(--ink);
  font-size: 18px;
  line-height: 1.15;
}

.segment span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.segment.active {
  border-color: var(--ink);
  background: var(--yellow);
  box-shadow: 5px 5px 0 var(--pink);
}

.segment.active strong {
  color: var(--ink);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.wallet-stats,
.stat-grid,
.review-grid {
  display: grid;
  gap: 8px;
  margin: 0;
}

.wallet-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wallet-stats div,
.stat-grid div,
.review-grid div {
  min-width: 0;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: var(--field);
  padding: 10px;
}

.stat-grid,
.review-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.review-sections {
  display: grid;
  gap: 12px;
  margin: 0;
}

.review-section {
  display: grid;
  gap: 10px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--paper-2);
  padding: 12px;
}

.review-section h3 {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
  text-transform: uppercase;
}

.review-section .review-grid,
.review-section .launch-strip {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.review-section .review-grid div,
.review-section .launch-strip div {
  background: var(--field);
}

dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

dd {
  margin: 5px 0 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

.wizard-shell {
  max-width: 1040px;
  margin: 0 auto;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.stepper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  border: 0;
  background: transparent;
  padding: 0 0 14px;
}

.step-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  background: var(--paper-2);
}

.step-pill span {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
  font-size: 12px;
}

.step-pill.active span {
  background: var(--pink);
  color: var(--white);
}

.wizard-layout {
  display: block;
}

.wizard-main {
  min-width: 0;
  padding: 0;
  perspective: 1400px;
}

.wizard-step {
  display: none;
}

.wizard-step.active {
  display: block;
  min-height: 0;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 10px 10px 0 var(--ink);
  padding: clamp(18px, 3vw, 34px);
  animation: card-flip-in 210ms ease-out;
  transform-origin: 50% 42%;
}

.wizard-aside {
  display: none;
}

@keyframes card-flip-in {
  from {
    opacity: 0;
    transform: rotateY(-8deg) translateY(4px);
  }

  to {
    opacity: 1;
    transform: rotateY(0) translateY(0);
  }
}

.guide-list {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.guide-list span {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: 9px 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.wizard-footer {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  border: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

.wizard-footer .status-line {
  margin: 0;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--ink);
  padding: 10px 12px;
  box-shadow: 4px 4px 0 var(--yellow);
  color: var(--pink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-weight: 850;
}

.wizard-footer .status-line::before {
  content: "> ";
  color: var(--yellow);
}

.question-block,
.panel-heading,
.phase-head,
.input-row,
.file-drop,
.quantity-row,
.inline-actions {
  display: flex;
  align-items: center;
}

.question-block {
  align-items: flex-start;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 16px;
}

.question-block.with-action,
.panel-heading,
.phase-head {
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  gap: 12px;
}

.metadata-heading-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.two-column {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}

.three-column {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.panel {
  padding: 16px;
}

.panel + .panel,
.two-column + .panel,
.panel + .action-bar,
.action-bar + .panel,
.wizard-shell + .panel {
  margin-top: 14px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.form-grid.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wide-field {
  grid-column: span 2;
}

.mint-page-media-field {
  align-self: start;
  align-content: start;
  grid-template-rows: 110px auto;
}

.admin-metadata-file-field {
  grid-column: span 2;
}

.admin-metadata-file-field .field-note {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  text-transform: none;
}

.rich-description-field {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.field-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.rich-description-toolbar,
.rich-description-panel-settings {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 8px;
}

.rich-description-toolbar label,
.rich-description-panel-settings label {
  display: grid;
  grid-template-columns: auto;
  gap: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  line-height: 1.15;
  text-transform: uppercase;
}

.rich-description-toolbar .mini-button {
  min-width: 36px;
  min-height: 36px;
  padding-inline: 10px;
}

.rich-description-toolbar input[type="color"],
.rich-description-panel-settings input[type="color"] {
  width: 42px;
  min-width: 42px;
  height: 32px;
  padding: 3px;
}

.rich-description-toolbar input[type="range"],
.rich-description-panel-settings input[type="range"] {
  width: 106px;
  min-width: 80px;
}

.rich-description-toolbar select {
  min-height: 32px;
  padding: 4px 26px 4px 8px;
  font-size: 12px;
}

.rich-description-panel-settings {
  align-items: center;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.rich-description-toolbar output,
.rich-description-panel-settings output {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.rich-description-align-controls {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 6px;
}

.rich-description-align-controls .mini-button {
  min-width: 64px;
}

.rich-description-align-controls .mini-button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
  box-shadow: 3px 3px 0 var(--pink);
}

.rich-description-editor {
  min-height: 148px;
  max-height: 300px;
  overflow-y: auto;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--field);
  color: var(--ink);
  padding: 12px;
  font-size: 16px;
  font-weight: 400;
  line-height: var(--description-line-height, 1.5);
  text-align: var(--description-text-align, left);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.rich-description-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--muted);
  pointer-events: none;
}

.rich-description-editor:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
}

label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.label-row {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.info-button {
  position: relative;
  z-index: 4;
  display: inline-grid;
  place-items: center;
  width: 21px;
  height: 21px;
  min-width: 21px;
  min-height: 21px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
  padding: 0;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  text-transform: none;
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--ink);
}

.info-button::after {
  content: attr(data-help);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 11px);
  width: min(300px, 78vw);
  transform: translateX(-50%);
  display: none;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  padding: 10px;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
  text-align: left;
  text-transform: none;
  white-space: normal;
}

.info-button.open::after {
  display: block;
}

.info-button:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

.notification-options .check-row .info-button::after {
  left: auto;
  right: 0;
  transform: none;
}

.file-drop .info-button {
  flex: 0 0 auto;
}

.surface-wrapper-field {
  margin-top: 12px;
}

.check-row {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 9px;
  align-self: end;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: var(--field);
  padding: 0 10px;
  color: var(--text);
  text-transform: none;
}

.check-row input {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  min-height: 24px;
  accent-color: var(--teal);
  cursor: pointer;
}

.wrapper-basics {
  align-items: end;
}

.wrapper-basics input[type="number"],
.wrapper-basics .check-row {
  min-height: 56px;
}

.wrapper-basics .check-row {
  margin-top: 22px;
}

input,
textarea,
select {
  width: 100%;
  min-width: 0;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: var(--field);
  color: var(--ink);
  outline: none;
}

input,
select {
  min-height: 44px;
  padding: 0 10px;
}

input[type="color"] {
  width: 64px;
  min-width: 64px;
  height: 44px;
  min-height: 44px;
  border-width: 3px;
  padding: 5px;
  box-shadow: 3px 3px 0 var(--ink);
  cursor: pointer;
}

input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

input[type="color"]::-webkit-color-swatch {
  border: 2px solid var(--ink);
  border-radius: 2px;
}

input[type="color"]::-moz-color-swatch {
  border: 2px solid var(--ink);
  border-radius: 2px;
}

.color-field {
  justify-items: start;
}

textarea {
  min-height: 96px;
  padding: 10px;
  resize: vertical;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--green);
  box-shadow: 4px 4px 0 var(--green);
}

input[readonly],
textarea[readonly] {
  color: var(--muted);
  background:
    linear-gradient(135deg, rgba(21, 17, 17, 0.035) 25%, transparent 25%) 0 0 / 10px 10px,
    var(--field);
}

.field-error,
input.field-error,
textarea.field-error,
select.field-error,
.file-error,
.choice-error,
.launch-error {
  border-color: #d91f43 !important;
  box-shadow: 4px 4px 0 #d91f43 !important;
}

.inline-field-error {
  margin-top: 0;
  color: var(--pink);
  font-size: 12px;
  font-weight: 950;
  line-height: 1.35;
  text-transform: none;
}

.phase-error {
  border-color: #d91f43;
}

.inline-actions {
  gap: 8px;
  margin-top: 12px;
}

.platform-funds-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  align-items: stretch;
}

.platform-withdraw-contract-field {
  margin-top: 14px;
}

.platform-funds-actions .primary-action,
.platform-funds-actions .secondary-action {
  width: 100%;
  min-width: 0;
  padding: 0 10px;
  white-space: normal;
  line-height: 1.05;
}

.verification-actions {
  align-items: center;
}

.validation-status {
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
}

.validation-status[data-state="success"] {
  color: var(--green-dark);
}

.validation-status[data-state="error"] {
  color: #d91f43;
}

.validation-status[data-state="checking"] {
  color: var(--blue);
}

.field-note,
.status-line {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.local-time-note {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
}

.status-line[data-tone="error"],
.terminal-status[data-tone="error"],
[data-tone="error"] {
  color: var(--pink);
  font-weight: 950;
}

.branch-fields {
  display: none;
  margin-top: 14px;
}

.branch-fields.active {
  display: block;
}

.owner-panel {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--paper-2);
  box-shadow: 5px 5px 0 var(--green);
  padding: 14px;
}

.owner-choice-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.connected-wallet-panel {
  display: grid;
  gap: 10px;
}

.connected-wallet-panel[hidden] {
  display: none;
}

.metadata-panel,
.wallet-note,
.instruction-panel {
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--paper-2);
}

.metadata-panel {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding: 14px;
  box-shadow: 5px 5px 0 var(--green);
}

.metadata-source-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.metadata-source-card {
  min-height: 150px;
}

.metadata-source-card span b {
  color: var(--ink);
}

.metadata-source-lines {
  display: grid;
  gap: 6px;
}

.metadata-source-panel {
  display: grid;
  gap: 10px;
}

.metadata-source-panel[hidden] {
  display: none;
}

.metadata-assets-drop input {
  max-width: 320px;
}

.metadata-direct-actions {
  justify-content: flex-start;
}

.metadata-direct-actions .primary-action {
  width: min(100%, 420px);
}

.metadata-start-over-note[hidden] {
  display: none;
}

.metadata-direct-stage-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.metadata-direct-stage-list[hidden] {
  display: none;
}

.metadata-direct-stage-card {
  border: 2px solid rgba(32, 26, 24, 0.2);
  border-radius: 8px;
  background: var(--paper);
  padding: 10px;
}

.metadata-direct-stage-card[data-state="success"] {
  border-color: var(--teal);
  background: #eef8f4;
}

.metadata-direct-stage-card[data-state="progress"] {
  border-color: var(--yellow);
  background: #fff8d9;
}

.metadata-direct-stage-card[data-state="failed"] {
  border-color: var(--pink);
  background: #fff0f7;
}

.metadata-direct-stage-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.metadata-direct-stage-header strong {
  font-size: 15px;
}

.metadata-direct-stage-card small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}

.metadata-direct-stage-status {
  flex: none;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--muted);
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 900;
}

.metadata-direct-stage-status[data-state="success"] {
  background: var(--teal);
  color: var(--white);
}

.metadata-direct-stage-status[data-state="progress"] {
  background: var(--yellow);
  color: var(--ink);
}

.metadata-direct-stage-status[data-state="failed"] {
  background: var(--pink);
  color: var(--white);
}

.instruction-panel {
  padding: 12px;
  background: #eef8f4;
}

.instruction-panel.compact-info {
  padding: 0;
}

.instruction-panel.compact-info summary {
  min-height: 42px;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--green-dark);
  font-size: 13px;
  font-weight: 950;
  padding: 0 12px;
}

.instruction-panel.compact-info ol,
.instruction-panel.compact-info p {
  margin-left: 12px;
  margin-right: 12px;
}

.instruction-panel.compact-info p {
  margin-bottom: 12px;
}

.caution-note {
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--yellow);
  box-shadow: 4px 4px 0 var(--ink);
  padding: 12px;
}

.caution-note strong {
  display: block;
  color: var(--ink);
  font-size: 13px;
}

.caution-note p {
  margin: 6px 0 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
}

.instruction-panel strong {
  color: var(--green-dark);
  font-size: 13px;
}

.instruction-panel p {
  margin: 6px 0 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
}

.instruction-panel ol {
  margin: 8px 0 0;
  padding-left: 20px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
}

.instruction-panel li + li {
  margin-top: 5px;
}

.instruction-panel a {
  color: var(--green-dark);
  font-weight: 900;
}

.instruction-panel code {
  border: 1px solid var(--ink);
  border-radius: 4px;
  background: var(--panel);
  padding: 1px 4px;
  font-weight: 900;
}

.wallet-note {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 360px);
  align-items: end;
  gap: 12px;
  margin-top: 14px;
  padding: 12px;
  box-shadow: 4px 4px 0 var(--yellow);
}

.wallet-note strong {
  display: block;
  color: var(--ink);
  font-size: 15px;
}

.wallet-note p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.launch-settings {
  margin-bottom: 12px;
}

.launch-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.launch-strip div {
  min-width: 0;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: var(--field);
  padding: 10px;
}

.launch-steps {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.launch-step-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: stretch;
}

.launch-step-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 5px 5px 0 var(--ink);
  padding: 12px;
}

.launch-step-card-combined {
  align-items: start;
}

.launch-step-combined-row {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: flex-start;
  padding: 14px;
}

.launch-step-combined-main {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.launch-step-combined-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
}

.launch-step-combined-actions {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-end;
  align-items: center;
  align-self: start;
  gap: 8px;
}

.launch-step-combined-actions .secondary-action,
.launch-step-combined-actions .primary-action {
  min-height: 38px;
  padding: 0 14px;
  font-size: 13px;
  line-height: 1;
}

.launch-step-address-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.launch-step-address-line .launch-step-status {
  margin: 0;
}

.launch-step-substate {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding-top: 2px;
}

.launch-step-substate[hidden] {
  display: none;
}

.launch-step-status-secondary {
  color: var(--muted);
}

.launch-step-pair-card {
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  align-items: start;
}

.launch-step-pair-card .launch-step-number {
  align-self: start;
}

.launch-step-pair-card .launch-step-right-actions {
  grid-column: 2;
  align-items: flex-start;
  justify-self: start;
  flex-flow: row wrap;
  margin-top: 4px;
}

.launch-step-pair-card .secondary-action,
.launch-step-pair-card .primary-action {
  min-height: 36px;
}

.launch-step-card[data-state="done"] {
  box-shadow: 5px 5px 0 var(--green);
}

.launch-step-card[data-state="ready"] {
  box-shadow: 5px 5px 0 var(--yellow);
}

.launch-step-card[data-state="checking"] {
  box-shadow: 5px 5px 0 var(--blue);
}

.launch-step-card[data-state="blocked"],
.launch-step-card.launch-error {
  box-shadow: 5px 5px 0 var(--pink);
}

.launch-step-number {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
  font-weight: 950;
  position: relative;
  overflow: hidden;
}

.launch-step-card[data-state="done"] .launch-step-number,
.launch-step-card[data-state="blocked"] .launch-step-number,
.launch-step-card.launch-error .launch-step-number,
.launch-step-card[data-state="checking"] .launch-step-number {
  color: transparent;
}

.launch-step-card[data-state="done"] .launch-step-number {
  background: var(--green);
}

.launch-step-card[data-state="blocked"] .launch-step-number,
.launch-step-card.launch-error .launch-step-number {
  background: #d91f43;
}

.launch-step-card[data-state="done"] .launch-step-number::before,
.launch-step-card[data-state="blocked"] .launch-step-number::before,
.launch-step-card.launch-error .launch-step-number::before {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--white);
  font-size: 21px;
  font-weight: 950;
  line-height: 1;
}

.launch-step-card[data-state="done"] .launch-step-number::before {
  content: "✓";
}

.launch-step-card[data-state="blocked"] .launch-step-number::before,
.launch-step-card.launch-error .launch-step-number::before {
  content: "×";
}

.launch-step-card[data-state="checking"] .launch-step-number::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 4px solid rgba(21, 17, 17, 0.18);
  border-top-color: var(--pink);
  border-radius: 999px;
  animation: spin 800ms linear infinite;
}

.launch-step-card h3 {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
}

.launch-step-card h4 {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.launch-step-card p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}

.launch-step-card .launch-step-status {
  color: var(--blue);
}

.launch-step-card .storage-purpose-note {
  color: var(--pink);
  font-weight: 500;
}

.launch-step-detail-stack {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.launch-step-substep {
  display: grid;
  gap: 6px;
  width: min(100%, 760px);
  border-top: 2px dashed rgba(21, 17, 17, 0.28);
  padding-top: 10px;
}

.launch-step-substep[hidden] {
  display: none;
}

.launch-step-right-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.launch-step-right-actions.launch-step-combined-actions {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}

.inline-copy-action {
  width: fit-content;
  min-height: 32px;
  margin-top: 8px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 0 12px;
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
}

.icon-copy-action {
  position: relative;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  margin-top: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  padding: 0;
  font-size: 0;
}

.icon-copy-action::before,
.icon-copy-action::after {
  content: "";
  position: absolute;
  width: 13px;
  height: 16px;
  border: 3px solid var(--ink);
  border-radius: 2px;
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.icon-copy-action::before {
  top: 5px;
  left: 5px;
  background: var(--yellow);
}

.icon-copy-action::after {
  top: 9px;
  left: 11px;
  background: var(--panel);
}

.inline-copy-action:hover {
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0 var(--ink);
}

.inline-copy-action:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--ink);
}

.icon-copy-action:hover,
.icon-copy-action:active {
  background: transparent;
  box-shadow: none;
}

.icon-copy-action:hover {
  transform: translateY(-1px);
}

.icon-copy-action:hover::before,
.icon-copy-action:hover::after {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--ink);
}

.icon-copy-action:active {
  transform: translateY(0);
}

.icon-copy-action:active::before,
.icon-copy-action:active::after {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--ink);
}

.launch-step-mini-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.launch-step-mini-actions .inline-copy-action {
  margin-top: 0;
}

.launch-step-text-action {
  align-self: center;
  border: 0;
  background: transparent;
  color: var(--blue);
  padding: 2px 0;
  font-size: 12px;
  font-weight: 950;
  text-decoration: underline;
  cursor: pointer;
}

.launch-step-text-action:hover {
  color: var(--pink);
}

.launch-step-text-action[hidden] {
  display: none;
}

.launch-step-status[data-state="done"] {
  color: var(--green-dark);
}

.launch-step-status[data-state="blocked"] {
  color: var(--pink);
}

.launch-step-status[data-state="checking"] {
  color: var(--blue);
}

.wallet-action-log {
  margin-top: 10px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--field);
  padding: 8px;
}

.wallet-action-title {
  margin: 0 0 6px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.wallet-action-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wallet-action-item {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  min-width: 0;
}

.wallet-action-icon {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
  line-height: 1;
  position: relative;
}

.wallet-action-copy {
  min-width: 0;
}

.wallet-action-copy strong,
.wallet-action-copy small {
  display: block;
}

.wallet-action-copy strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.wallet-action-copy small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.wallet-action-copy a {
  color: var(--blue);
  font-weight: 950;
}

.wallet-action-item[data-state="done"] .wallet-action-icon {
  background: var(--green);
  color: var(--white);
}

.wallet-action-item[data-state="done"] .wallet-action-icon::before {
  content: "✓";
}

.wallet-action-item[data-state="error"] .wallet-action-icon {
  background: #d91f43;
  color: var(--white);
}

.wallet-action-item[data-state="error"] .wallet-action-icon::before {
  content: "×";
}

.wallet-action-item[data-state="submitted"] .wallet-action-icon::before,
.wallet-action-item[data-state="waiting"] .wallet-action-icon::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--ink);
}

.wallet-action-item[data-state="signing"] .wallet-action-icon {
  color: transparent;
}

.wallet-action-item[data-state="signing"] .wallet-action-icon::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 3px solid rgba(21, 17, 17, 0.18);
  border-top-color: var(--pink);
  border-radius: 999px;
  animation: spin 800ms linear infinite;
}

.launch-step-actions {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.disabled-link {
  pointer-events: none;
  opacity: 0.48;
}

.phase-controls,
.global-allow-list,
.global-exclude-list {
  margin-bottom: 12px;
}

.phase-controls .template-action {
  grid-column: 1 / -1;
  justify-self: end;
}

.platform-auto-allow-list {
  display: grid;
  gap: 10px;
  margin: 0 0 14px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--paper-2);
  padding: 12px;
}

.admin-auto-allow-list,
.admin-exclude-list-panel {
  margin-top: 14px;
}

.admin-auto-allow-list-actions {
  justify-content: flex-end;
  margin-top: 0;
}

.platform-auto-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.platform-auto-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px minmax(96px, auto) auto;
  gap: 8px;
  align-items: center;
  min-height: 48px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: var(--field);
  padding: 8px;
  color: var(--text);
  text-transform: none;
}

.platform-auto-option span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
}

.platform-auto-option input[type="checkbox"] {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  min-height: 22px;
  accent-color: var(--teal);
}

.platform-auto-option input[type="number"] {
  min-height: 34px;
  padding: 0 9px;
  font-size: 13px;
  text-align: center;
}

.platform-auto-option select {
  min-height: 34px;
  border-width: 2px;
  padding: 0 9px;
  font-size: 13px;
}

.platform-auto-option .info-button {
  justify-self: end;
}

.platform-auto-status {
  color: var(--muted);
}

.phase-auto-defaults {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--panel);
  padding: 12px;
}

.phase-auto-toggle-grid,
.phase-auto-layout {
  display: grid;
  gap: 10px;
}

.phase-auto-layout {
  grid-template-columns: minmax(230px, 0.82fr) minmax(360px, 1.18fr);
  align-items: stretch;
}

.phase-auto-grid {
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
}

.phase-auto-role-grid {
  grid-template-columns: 1fr;
}

.phase-auto-option {
  background: var(--field);
}

.phase-auto-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 48px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  padding: 8px;
  color: var(--text);
  text-transform: none;
}

.phase-auto-culture-option {
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: start;
  min-height: 100%;
}

.phase-auto-culture-option span {
  align-self: start;
}

.phase-auto-logo {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex: 0 0 auto;
}

.phase-auto-stack-option {
  display: inline-grid;
  grid-template-columns: minmax(0, auto) auto;
  justify-self: start;
  min-height: 32px;
  padding: 4px 8px;
}

.phase-auto-stack-option span {
  font-size: 12px;
}

.phase-auto-stack-option select {
  min-height: 30px;
  border-width: 2px;
  border-radius: 6px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 900;
}

.phase-auto-stack-option .info-button {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  font-size: 11px;
}

.phase-auto-option span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
}

.phase-auto-option input[type="checkbox"] {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  min-height: 22px;
  accent-color: var(--teal);
}

.phase-auto-option.phase-auto-stack-option input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-height: 16px;
}

.phase-auto-status {
  border-top: 1px solid rgba(32, 26, 24, 0.18);
  padding-top: 8px;
}

.phase-order-note {
  margin: -2px 0 14px;
}

.phase-bulk-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin: -4px 0 14px;
}

.phase-bulk-actions .secondary-action {
  min-height: 38px;
  padding: 0 18px;
  font-size: 13px;
}

.phase-add-action {
  display: flex;
  width: fit-content;
  margin: 14px 0 0 auto;
}

.phase-list {
  display: grid;
  gap: 12px;
}

.phase-row {
  position: relative;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 5px 5px 0 var(--ink);
  padding: 12px;
}

.phase-row.dragging {
  opacity: 0.72;
}

.phase-row.dragging::before {
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: -2px;
  width: 4px;
  background: var(--pink);
  content: "";
}

.phase-row.is-drop-before::after,
.phase-row.is-drop-after::after {
  position: absolute;
  left: 10px;
  right: 10px;
  z-index: 3;
  height: 4px;
  border-radius: 999px;
  background: var(--pink);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--field) 76%, transparent);
  content: "";
}

.phase-row.is-drop-before::after {
  top: -13px;
}

.phase-row.is-drop-after::after {
  bottom: -13px;
}

.phase-row.is-collapsed .phase-body {
  display: none;
}

.phase-row.is-collapsed {
  background: var(--paper-2);
}

.phase-head {
  align-items: center;
}

.drag-handle {
  position: relative;
  align-self: center;
  flex: 0 0 22px;
  width: 22px;
  min-width: 22px;
  height: 32px;
  border: 0;
  border-radius: 6px;
  padding: 0;
  background: transparent;
  color: transparent;
  cursor: grab;
  font-size: 0;
  line-height: 0;
}

.drag-handle::before,
.drag-handle::after {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  content: "";
}

.drag-handle::before {
  top: 6px;
  left: 4px;
  z-index: 1;
  background: color-mix(in srgb, var(--ink) 14%, var(--paper) 86%);
  border: 1px solid rgba(25, 20, 18, 0.12);
  box-shadow:
    8px 0 0 color-mix(in srgb, var(--ink) 14%, var(--paper) 86%),
    0 10px 0 color-mix(in srgb, var(--ink) 14%, var(--paper) 86%),
    8px 10px 0 color-mix(in srgb, var(--ink) 14%, var(--paper) 86%),
    0 20px 0 color-mix(in srgb, var(--ink) 14%, var(--paper) 86%),
    8px 20px 0 color-mix(in srgb, var(--ink) 14%, var(--paper) 86%);
}

.drag-handle::after {
  top: 7px;
  left: 5px;
  background: var(--ink);
  box-shadow:
    8px 0 0 var(--ink),
    0 10px 0 var(--ink),
    8px 10px 0 var(--ink),
    0 20px 0 var(--ink),
    8px 20px 0 var(--ink);
}

.drag-handle:active {
  cursor: grabbing;
}

.drag-handle:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 2px;
}

.phase-head-copy {
  min-width: 0;
  flex: 1;
}

.phase-title {
  display: block;
  color: var(--ink);
  font-size: 15px;
}

.phase-summary-line {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
}

.phase-head-actions {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.phase-section-grid {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.phase-section {
  display: grid;
  gap: 10px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--paper-2);
  padding: 12px;
}

.phase-section-title {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
  text-transform: uppercase;
}

.phase-note {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
}

.file-drop {
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  border: 2px dashed var(--ink);
  border-radius: 6px;
  background: var(--paper-2);
  padding: 10px;
}

.file-drop input {
  max-width: 260px;
  border: 0;
  background: transparent;
  padding: 0;
}

.allow-list-duplicate-control {
  display: inline-grid;
  grid-template-columns: auto minmax(190px, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: min(100%, 390px);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.allow-list-duplicate-control select {
  max-width: none;
  min-height: 32px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: var(--field);
  padding: 0 8px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  text-transform: none;
}

.file-drop span {
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.file-drop > span:not(.verification-icon) {
  flex: 1;
}

.file-drop-copy {
  flex: 1;
  min-width: 180px;
  display: grid;
  gap: 3px;
}

.file-drop-copy strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
  line-height: 1.1;
  text-transform: uppercase;
}

.file-drop-copy span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.25;
}

.allow-list-clear-btn {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 0 10px;
  font-size: 12px;
  line-height: 1;
}

.metadata-csv-drop {
  align-items: center;
  flex-wrap: wrap;
}

.metadata-csv-drop #metadataCsvSummary {
  flex: 1;
}

.metadata-count-action {
  min-height: 30px;
  border-radius: 999px;
  background: var(--yellow) !important;
  color: var(--ink) !important;
  padding: 0 10px;
  font-size: 12px;
  line-height: 1;
  box-shadow: 3px 3px 0 var(--ink);
}

.verification-icon {
  display: none;
  place-items: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  min-width: 28px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: 18px;
  font-weight: 950;
  line-height: 1;
}

.verification-icon[data-state="checking"],
.verification-icon[data-state="success"],
.verification-icon[data-state="error"] {
  display: inline-grid;
}

.verification-icon[data-state="success"] {
  background: var(--green);
  color: var(--white);
}

.verification-icon[data-state="success"]::before {
  content: "✓";
}

.verification-icon[data-state="error"] {
  background: #d91f43;
  color: var(--white);
}

.verification-icon[data-state="error"]::before {
  content: "×";
}

.verification-icon[data-state="checking"]::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 3px solid rgba(21, 17, 17, 0.2);
  border-top-color: var(--pink);
  border-radius: 999px;
  animation: spin 800ms linear infinite;
}

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

.choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.input-row {
  gap: 10px;
}

.input-row input {
  flex: 1;
}

.button-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.admin-tabs,
.creation-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.admin-tab,
.creation-tab,
.admin-view-tab {
  min-height: 38px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: var(--field);
  color: var(--text);
  padding: 0 12px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink);
}

.admin-tab.active,
.creation-tab.active,
.admin-view-tab.active {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
  box-shadow: 3px 3px 0 var(--pink);
}

.admin-panel {
  display: none;
  margin-top: 14px;
}

.admin-panel.active {
  display: block;
}

.admin-home,
.admin-detail {
  margin-top: 14px;
}

.admin-home {
  display: grid;
  gap: 12px;
}

.admin-heading-actions,
.creator-report-heading-actions,
.creator-report-filter-actions,
.creator-report-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.admin-home-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) minmax(190px, auto) minmax(280px, 1fr) auto;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.admin-type-filter {
  position: relative;
  min-width: 190px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.admin-type-filter summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 47px;
  border: 2px solid var(--ink);
  border-radius: 7px;
  background: var(--field);
  color: var(--muted);
  cursor: pointer;
  list-style: none;
  padding: 9px 12px;
  box-shadow: 3px 3px 0 var(--ink);
}

.admin-type-filter summary::-webkit-details-marker {
  display: none;
}

.admin-type-filter summary strong {
  color: var(--ink);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: none;
}

.admin-type-filter-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  left: 0;
  display: grid;
  gap: 8px;
  width: min(310px, calc(100vw - 48px));
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--panel);
  padding: 12px;
  box-shadow: 6px 6px 0 var(--ink);
}

.admin-type-filter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-type-filter-actions button {
  border: 0;
  background: none;
  color: var(--green-dark);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 950;
  padding: 0;
  text-decoration: underline;
  text-transform: none;
}

.admin-type-filter-menu label {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
  text-transform: none;
}

.admin-type-filter-menu input {
  width: 18px;
  height: 18px;
  accent-color: var(--pink);
}

.admin-type-filter-menu .factory-kind-badge {
  margin-right: 0;
}

.admin-manual-load {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.admin-manual-load span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  min-width: 0;
}

.admin-home-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.creator-reports-panel {
  display: grid;
  gap: 16px;
}

.creator-report-grid,
.creator-report-export-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 12px;
  align-items: end;
}

.creator-report-inline-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 10px;
}

.creator-report-grid label,
.creator-report-export-row label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.creator-report-grid select,
.creator-report-grid input,
.creator-report-export-row select {
  min-width: 0;
  width: 100%;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: var(--field);
  color: var(--text);
  padding: 10px 12px;
  font: inherit;
  font-weight: 850;
}

.creator-report-drop-filter {
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.creator-report-drop-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px;
}

.creator-report-drop-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: var(--field);
  padding: 10px;
}

.creator-report-drop-option input {
  width: 18px;
  height: 18px;
  accent-color: var(--pink);
}

.creator-report-drop-option span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.creator-report-drop-option strong,
.creator-report-drop-option small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creator-report-drop-option strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 950;
}

.creator-report-drop-option small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.creator-report-export-row {
  grid-template-columns: minmax(170px, 0.7fr) minmax(170px, 0.7fr) minmax(240px, auto);
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.creator-report-actions {
  align-self: end;
}

.creator-report-preview {
  display: grid;
  gap: 10px;
}

.creator-report-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.creator-report-summary span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 950;
}

.creator-report-table-wrap {
  overflow-x: auto;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--field);
}

.creator-report-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 13px;
}

.creator-report-table th,
.creator-report-table td {
  border-bottom: 1px solid var(--line);
  padding: 9px 10px;
  text-align: left;
  vertical-align: top;
}

.creator-report-table th {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.creator-report-table td {
  color: var(--text);
  font-weight: 800;
}

.creator-report-table tr:last-child td {
  border-bottom: 0;
}

.admin-search-label {
  max-width: none;
}

.admin-created-contracts {
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.admin-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.admin-section-heading h3,
.admin-section-heading .field-note {
  margin: 0;
}

.admin-creation-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}

.admin-published-list {
  grid-template-columns: 1fr;
}

.admin-creation-row {
  grid-template-columns: minmax(260px, 1.1fr) minmax(170px, 0.45fr) minmax(320px, auto);
}

.admin-creation-main h3 {
  margin: 0;
}

.admin-creation-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.admin-creation-title span:last-child,
.draft-contract-title-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.draft-contract-name-control {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.draft-contract-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  min-width: 0;
}

.draft-contract-title-text {
  line-height: 1.1;
}

.draft-contract-name-edit {
  appearance: none;
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 24px;
  min-width: 24px;
  height: 24px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  cursor: pointer;
  padding: 0;
  transform: none;
}

.draft-contract-name-edit svg {
  width: 18px;
  height: 18px;
  overflow: visible;
}

.draft-contract-name-edit .draft-edit-pencil-body {
  fill: var(--yellow);
  stroke: var(--ink);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.draft-contract-name-edit .draft-edit-pencil-line {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.draft-contract-name-edit:hover,
.draft-contract-name-edit:focus-visible {
  background: transparent;
  box-shadow: none;
  transform: none;
}

.draft-contract-name-edit:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 2px;
}

.draft-contract-name-editor {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0;
}

.draft-contract-name-editor[hidden] {
  display: none !important;
}

.draft-contract-name-editor input {
  flex: 1 1 260px;
  min-width: 0;
}

.admin-chain-mark {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--field);
  color: var(--ink);
  box-shadow: 2px 2px 0 var(--yellow);
  font-size: 9px;
  font-weight: 950;
  line-height: 1;
}

.admin-chain-mark-icon {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.admin-wrapper-meta {
  display: grid;
  gap: 4px;
  margin-top: 6px;
}

.admin-wrapper-address-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
}

.admin-wrapper-address-text {
  color: var(--muted);
}

.admin-wrapper-date::before {
  content: "\00b7";
  margin-right: 5px;
}

.admin-inline-copy.icon-copy-action {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  color: var(--ink);
}

.admin-inline-copy.icon-copy-action::before,
.admin-inline-copy.icon-copy-action::after {
  width: 10px;
  height: 13px;
  border-width: 3px;
}

.admin-inline-copy.icon-copy-action::before {
  top: 4px;
  left: 4px;
}

.admin-inline-copy.icon-copy-action::after {
  top: 8px;
  left: 9px;
}

.admin-wrapper-status-lines {
  display: grid;
  gap: 3px;
}

.admin-wrapper-status-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.1;
}

.admin-wrapper-status-icon {
  display: inline-grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--paper-2);
  color: var(--muted);
  font-size: 10px;
  line-height: 1;
}

.admin-wrapper-status-line[data-state="yes"] .admin-wrapper-status-icon {
  background: var(--green);
  color: var(--white);
}

.factory-kind-badge {
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 2px 2px 0 var(--ink);
}

.factory-kind-badge[data-factory-type="one-one-x"] {
  background: var(--yellow);
  color: var(--ink);
}

.factory-kind-badge[data-factory-type="editions"] {
  background: var(--pink);
  color: var(--white);
}

.factory-kind-badge[data-factory-type="draw"] {
  background: var(--light-blue);
  color: var(--ink);
}

.factory-kind-badge[data-factory-type="other"] {
  background: var(--white);
  color: var(--ink);
}

.admin-creation-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-draft-row .creation-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-creation-actions .mini-button {
  min-height: 32px;
}

.primary-mini {
  background: var(--pink);
  color: var(--white);
}

.warning-mini {
  background: var(--yellow);
  color: var(--ink);
}

.mini-button[aria-disabled="true"] {
  opacity: 0.48;
}

.admin-phase-editor-list {
  display: grid;
  gap: 12px;
}

.admin-phase-card {
  display: grid;
  gap: 12px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 5px 5px 0 var(--ink);
  padding: 14px;
}

.admin-phase-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-phase-card-heading h3,
.admin-phase-card-heading p {
  margin: 0;
}

.admin-phase-sections {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.admin-phase-sections section {
  display: grid;
  gap: 8px;
  min-width: 0;
  border: 2px solid rgba(32, 26, 24, 0.18);
  border-radius: 8px;
  background: var(--paper-2);
  padding: 10px;
}

.admin-phase-sections h4 {
  margin: 0;
  color: var(--pink);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.admin-phase-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.admin-phase-allowlist-note {
  margin: -2px 0 0;
  color: var(--pink);
  font-weight: 950;
}

.admin-detail-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--paper-2);
  box-shadow: 5px 5px 0 var(--yellow);
  padding: 12px;
}

.admin-selected-copy {
  min-width: 0;
}

.admin-home-return {
  justify-self: end;
  align-self: start;
}

.admin-detail-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.admin-selected-copy .field-note {
  overflow-wrap: anywhere;
}

.admin-overview-grid,
.admin-address-section,
.admin-address-list {
  display: grid;
  gap: 12px;
}

.admin-address-section {
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 5px 5px 0 var(--ink);
  padding: 14px;
}

.collector-export-card {
  margin-top: 14px;
}

.admin-address-list {
  gap: 10px;
}

.admin-address-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--field);
  padding: 10px;
}

.admin-address-main {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.admin-address-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.admin-address-row code {
  display: block;
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.contract-verification-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper-2);
  padding: 0 9px 0 5px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 950;
  text-transform: none;
}

.contract-verification-mark {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--yellow);
}

.contract-verification-badge[data-state="verified"] .contract-verification-mark {
  background: var(--green);
}

.contract-verification-badge[data-state="verified"] .contract-verification-mark::before {
  content: "";
  width: 5px;
  height: 9px;
  border: solid var(--white);
  border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg);
}

.contract-verification-badge[data-state="pending"] .contract-verification-mark::before {
  content: "";
  width: 8px;
  height: 8px;
  border: 2px solid rgba(21, 17, 17, 0.2);
  border-top-color: var(--ink);
  border-radius: 999px;
  animation: spin 800ms linear infinite;
}

.contract-verification-badge[data-state="warning"] .contract-verification-mark {
  background: var(--yellow);
}

.contract-verification-badge[data-state="warning"] .contract-verification-mark::before {
  content: "!";
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
  line-height: 1;
  transform: translateY(-1px);
}

.contract-verification-badge[data-state="unverified"] .contract-verification-mark {
  background: #e62f58;
  color: var(--white);
}

.contract-verification-badge[data-state="unverified"] .contract-verification-mark::before {
  content: "x";
  color: var(--white);
  font-size: 13px;
  font-weight: 950;
  line-height: 1;
  transform: translateY(-1px);
}

.contract-verification-badge[data-state="neutral"] .contract-verification-mark {
  background: var(--paper-2);
}

.contract-verification-badge[data-state="neutral"] .contract-verification-mark::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--ink);
}

.address-copy-icon {
  position: relative;
  width: 32px;
  min-width: 32px;
  height: 32px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}

.address-copy-icon::before,
.address-copy-icon::after {
  content: "";
  position: absolute;
  width: 13px;
  height: 16px;
  border: 3px solid var(--ink);
  border-radius: 2px;
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.address-copy-icon::before {
  left: 5px;
  top: 5px;
  background: var(--yellow);
}

.address-copy-icon::after {
  left: 11px;
  top: 9px;
  background: var(--panel);
}

.address-copy-icon:hover {
  background: transparent;
}

.address-copy-icon:hover::before,
.address-copy-icon:hover::after {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--ink);
}

.address-copy-icon:active::before,
.address-copy-icon:active::after {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--ink);
}

.tool-panel {
  display: grid;
  align-content: start;
  gap: 10px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 5px 5px 0 var(--ink);
  padding: 14px;
}

.admin-burn-panel {
  margin-top: 12px;
}

.bulk-airdrop-panel textarea {
  min-height: 118px;
}

.bulk-airdrop-csv-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: stretch;
}

.bulk-airdrop-csv-row .file-drop {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  align-content: center;
  gap: 5px;
  min-height: 50px;
  padding: 8px 10px;
}

.bulk-airdrop-csv-row .file-drop input,
.bulk-airdrop-csv-row .file-drop span {
  width: 100%;
  max-width: 100%;
}

.bulk-airdrop-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.bulk-airdrop-failed-list {
  width: 100%;
  min-height: 150px !important;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.45;
  white-space: pre;
}

.danger-panel {
  box-shadow: 5px 5px 0 var(--pink);
}

.danger-action {
  background: #e62f58 !important;
  color: var(--white) !important;
}

.admin-allow-list-tools {
  margin-top: 12px;
}

.admin-funds-section {
  display: grid;
  gap: 12px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 5px 5px 0 var(--ink);
  padding: 14px;
}

.admin-funds-section + .admin-funds-section {
  margin-top: 12px;
}

.admin-funds-amount {
  display: block;
  color: var(--pink);
  font-size: clamp(42px, 7vw, 78px);
  font-weight: 950;
  line-height: 0.9;
  overflow-wrap: anywhere;
}

.creations-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.empty-state {
  border: 2px dashed var(--ink);
  border-radius: 8px;
  background: var(--field);
  padding: 22px;
}

.creation-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(260px, 0.8fr) auto;
  align-items: center;
  gap: 12px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 5px 5px 0 var(--ink);
  padding: 12px;
}

.creation-main {
  min-width: 0;
}

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

.creation-stats div {
  min-width: 0;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: var(--paper-2);
  padding: 8px;
}

.creation-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.action-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, auto));
  align-items: center;
  justify-content: start;
  gap: 10px;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  margin-top: 16px;
}

.result-panel {
  margin-top: 12px;
  border-color: var(--ink);
  box-shadow: 5px 5px 0 var(--green);
}

.code-box {
  min-height: 260px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
}

.code-box.tall {
  min-height: 420px;
}

.widget-preview {
  margin-top: 12px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--field);
  min-height: 220px;
  padding: 10px;
}

.mint-body {
  color-scheme: dark;
  background: #111416;
  --bg: #111416;
  --panel: #181b1e;
  --panel-2: #202428;
  --field: #111416;
  --line: #31383f;
  --text: #f6f2ea;
  --ink: #f6f2ea;
  --muted: #a8b0bb;
  --green: #30d89b;
  --mint-success: #30d89b;
  --mint-success-contrast: #111416;
  --mint-accent: #30d89b;
  --mint-accent-contrast: #111416;
  --mint-accent-secondary: #a2d830;
  --mint-accent-secondary-contrast: #111416;
  --mint-accent-tertiary: #d8306d;
  --mint-accent-tertiary-contrast: #fffdf8;
  --mint-accent-secondary-soft: rgba(162, 216, 48, 0.2);
  --mint-accent-tertiary-soft: rgba(216, 48, 109, 0.18);
  --shadow: none;
}

.mint-top-actions {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 20;
  display: grid;
  justify-items: end;
  gap: 6px;
  max-width: min(320px, calc(100vw - 36px));
}

.mint-top-wallet {
  max-width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(17, 20, 22, 0.82);
  color: #fffdf8;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.72);
  white-space: nowrap;
  backdrop-filter: blur(10px);
}

.mint-top-wallet[hidden] {
  display: none;
}

.mint-top-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border: 1px solid var(--mint-accent);
  border-radius: 999px;
  background: rgba(17, 20, 22, 0.88);
  color: #fffdf8;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 0 0 1px rgba(246, 242, 234, 0.08);
  backdrop-filter: blur(10px);
  cursor: pointer;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.72);
}

.mint-top-action:hover,
.mint-top-action:focus-visible {
  background: rgba(17, 20, 22, 0.96);
  color: #fffdf8;
  outline: none;
}

.mint-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(320px, 500px);
}

.mint-media {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: #202428;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.mint-page-media-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.mint-media-description {
  position: absolute;
  z-index: 1;
  top: clamp(80px, 14vh, 160px);
  left: clamp(18px, 3vw, 34px);
  width: min(520px, calc(100% - clamp(36px, 6vw, 68px)));
  max-height: min(52vh, 520px);
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  background: var(--description-panel-color, rgba(12, 14, 17, 0.42));
  color: #fff;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(5px);
}

.mint-media.has-page-logo .mint-media-description {
  top: clamp(118px, 20vh, 220px);
}

.mint-page-logo {
  position: absolute;
  z-index: 2;
  top: clamp(18px, 3vw, 34px);
  left: clamp(18px, 3vw, 34px);
  display: block;
  max-width: min(220px, calc(100% - clamp(36px, 6vw, 68px)));
  max-height: 72px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 12px;
  background: rgba(12, 14, 17, 0.48);
  object-fit: contain;
  padding: 8px 10px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(8px);
}

.mint-media-description[hidden] {
  display: none;
}

.mint-media-description-content {
  max-height: min(52vh, 520px);
  overflow-y: auto;
  padding: clamp(16px, 2.2vw, 24px) clamp(48px, 5vw, 62px) clamp(16px, 2.2vw, 24px) clamp(16px, 2.2vw, 24px);
  font-size: clamp(14px, 1.35vw, 18px);
  font-weight: 400;
  line-height: var(--description-line-height, 1.55);
  text-align: var(--description-text-align, left);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.72);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.mint-description-scroll {
  position: absolute;
  z-index: 2;
  right: 10px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 999px;
  background: rgba(8, 10, 12, 0.46);
  color: #fff;
  padding: 0;
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  backdrop-filter: blur(6px);
}

.mint-description-scroll:hover,
.mint-description-scroll:focus-visible {
  border-color: #fff;
  background: rgba(8, 10, 12, 0.72);
  outline: none;
}

.mint-description-scroll-up {
  top: 10px;
}

.mint-description-scroll-down {
  bottom: 10px;
}

.mint-page-banner {
  position: relative;
  z-index: 2;
  align-self: stretch;
  margin: clamp(16px, 3vw, 28px);
  border: 1px solid color-mix(in srgb, var(--mint-accent) 76%, var(--text));
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 78%, transparent);
  color: var(--text);
  padding: 13px 15px;
  font-size: clamp(14px, 1.45vw, 18px);
  font-weight: 850;
  line-height: 1.25;
  text-align: center;
  box-shadow: 0 0 0 1px rgba(246, 242, 234, 0.08), 0 12px 36px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(12px);
  overflow-wrap: anywhere;
}

.mint-media.default-studio-media {
  --art-bg: #f7f1e8;
  --art-panel: #fffaf1;
  --art-ink: #151111;
  --art-pink: #f0449b;
  --art-pink-contrast: #151111;
  --art-secondary: #f4c84f;
  --art-tertiary: #179b92;
  --art-secondary-soft: rgba(244, 200, 79, 0.22);
  --art-tertiary-soft: rgba(23, 155, 146, 0.18);
  --art-yellow: #f4c84f;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  place-items: center;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(21, 17, 17, 0.06) 1px, transparent 1px),
    linear-gradient(180deg, rgba(21, 17, 17, 0.06) 1px, transparent 1px),
    var(--art-bg);
  background-size: 28px 28px, 28px 28px, auto;
  padding: clamp(18px, 5vw, 56px);
}

.mint-media.default-studio-media .mint-page-banner {
  justify-self: stretch;
  align-self: start;
  margin: 0 0 clamp(14px, 3vw, 28px);
  background: var(--art-pink);
  color: var(--art-pink-contrast);
  border: 3px solid var(--art-ink);
  box-shadow: 8px 8px 0 var(--art-ink);
}

.default-mint-art {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  width: min(72vh, 72vw, 640px);
  aspect-ratio: 1;
  border: 3px solid var(--art-ink);
  border-radius: 10px;
  background:
    linear-gradient(135deg, var(--art-secondary-soft) 0 16%, transparent 16% 100%),
    linear-gradient(315deg, var(--art-tertiary-soft) 0 18%, transparent 18% 100%),
    var(--art-panel);
  box-shadow: 12px 12px 0 var(--art-ink);
  color: var(--art-ink);
  overflow: hidden;
}

.default-mint-art img {
  justify-self: center;
  width: min(58%, 320px);
  height: auto;
}

.default-mint-art strong {
  display: block;
  width: 100%;
  border-top: 3px solid var(--art-ink);
  background: var(--art-pink);
  color: var(--art-pink-contrast);
  padding: 18px;
  font-size: clamp(20px, 3.4vw, 42px);
  font-weight: 950;
  line-height: 1.05;
  overflow-wrap: anywhere;
  text-align: center;
}

.mint-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid var(--line);
  background: var(--panel);
  padding: 28px;
}

.mint-panel h1 {
  font-size: 42px;
}

.mint-status-box {
  display: grid;
  gap: 14px;
  margin: 18px 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, var(--mint-accent-secondary-soft), transparent 36%),
    linear-gradient(315deg, var(--mint-accent-tertiary-soft), transparent 42%),
    var(--panel-2);
  padding: 16px;
}

.mint-live-header {
  display: grid;
  gap: 12px;
  align-items: start;
}

.mint-phase-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--mint-accent-secondary);
  color: var(--mint-accent-secondary-contrast);
  padding: 0 12px;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.mint-countdown {
  display: grid;
  gap: 4px;
  line-height: 1;
}

.mint-countdown-label {
  color: var(--text);
  font-size: 18px;
  font-weight: 900;
}

.mint-countdown-time {
  color: var(--mint-accent);
  font-size: clamp(42px, 7vw, 78px);
  font-weight: 950;
  line-height: 0.9;
  overflow-wrap: anywhere;
}

.mint-opensea-link {
  display: inline-flex;
  position: absolute;
  z-index: 4;
  top: clamp(18px, 3vw, 34px);
  right: clamp(18px, 3vw, 34px);
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: rgba(12, 14, 17, 0.76);
  text-decoration: none;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(8px);
}

.mint-opensea-icon {
  display: block;
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.mint-opensea-link:hover,
.mint-opensea-link:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.36);
  outline: none;
}

body.light-page .mint-opensea-link,
.mint-media.default-studio-media .mint-opensea-link {
  border-color: rgba(21, 17, 17, 0.18);
  background: rgba(255, 250, 241, 0.88);
}

.mint-supply-progress {
  display: grid;
  gap: 8px;
}

.mint-supply-progress[hidden] {
  display: none;
}

.mint-supply-progress-copy {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.mint-supply-progress-copy strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 950;
}

.mint-supply-progress-copy span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-align: right;
}

.mint-progress-track {
  width: 100%;
  height: 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--field);
  overflow: hidden;
}

.mint-progress-bar {
  display: block;
  width: var(--mint-progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--mint-accent), var(--mint-accent-tertiary));
  transition: width 240ms ease;
}

.mint-phase-list {
  display: grid;
  gap: 8px;
}

.mint-phase-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "main status"
    "main actions"
    "main eligibility";
  gap: 8px 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--field);
  padding: 10px;
}

.mint-phase-item.is-live {
  border-color: var(--mint-success);
}

.mint-phase-item.is-ended {
  border-color: transparent;
}

.mint-phase-item.is-sold-out,
.mint-phase-item.is-unavailable {
  border-color: transparent;
}

.mint-phase-main {
  display: grid;
  grid-area: main;
  gap: 3px;
  min-width: 0;
}

.mint-phase-main strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.mint-phase-main span,
.mint-phase-time,
.mint-phase-empty {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.mint-phase-time {
  display: block;
  font-weight: 900;
}

.mint-phase-main .local-time-note,
.mint-eligibility-main .local-time-note {
  margin-top: -1px;
}

.mint-phase-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  grid-area: status;
  justify-self: end;
  align-self: start;
  gap: 6px;
  min-height: 18px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.mint-phase-state::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.mint-phase-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  grid-area: actions;
  justify-self: end;
  gap: 6px;
  min-height: 28px;
}

.mint-phase-item.is-live .mint-phase-state {
  color: var(--mint-success);
}

.mint-phase-item.is-upcoming .mint-phase-state {
  color: var(--white);
}

.mint-phase-item.is-ended .mint-phase-state {
  color: var(--muted);
}

.mint-phase-item.is-sold-out .mint-phase-state,
.mint-phase-item.is-unavailable .mint-phase-state {
  color: var(--muted);
}

.mint-phase-eligibility {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  grid-area: eligibility;
  justify-self: end;
  gap: 5px;
  min-height: 28px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.mint-phase-eligibility-mark {
  display: inline-flex;
  flex: 0 0 16px;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
}

.mint-phase-eligibility.is-eligible {
  border-color: var(--mint-success);
  color: var(--mint-success);
}

.mint-phase-eligibility.is-eligible .mint-phase-eligibility-mark {
  border-color: var(--mint-success);
  background: transparent;
  color: var(--mint-success);
}

.mint-phase-eligibility.is-eligible .mint-phase-eligibility-mark::before {
  content: "\2713";
}

.mint-phase-eligibility.is-minted {
  border-color: var(--mint-success);
  background: var(--mint-success);
  color: var(--mint-success-contrast);
}

.mint-phase-eligibility.is-minted .mint-phase-eligibility-mark {
  border-color: var(--mint-success-contrast);
  background: color-mix(in srgb, var(--mint-success-contrast) 14%, transparent);
  color: var(--mint-success-contrast);
}

.mint-phase-eligibility.is-minted .mint-phase-eligibility-mark::before {
  content: "\2713";
}

.mint-phase-eligibility.is-checking {
  border-color: var(--mint-accent-secondary);
  color: var(--mint-accent-secondary);
}

.mint-phase-eligibility.is-checking .mint-phase-eligibility-mark {
  border-color: rgba(162, 216, 48, 0.28);
  border-top-color: currentColor;
  animation: spin 800ms linear infinite;
}

.mint-phase-eligibility.is-not-eligible {
  border-color: #7b3434;
  color: #ff8d8d;
}

.mint-phase-eligibility.is-not-eligible .mint-phase-eligibility-mark {
  border-color: #ff5f6d;
  background: #ff5f6d;
  color: #16080a;
}

.mint-phase-eligibility.is-not-eligible .mint-phase-eligibility-mark::before {
  content: "\00d7";
}

.mint-phase-empty {
  margin: 0;
}

.mint-recent-card {
  margin: 0 0 14px;
}

.mint-recent-card[hidden] {
  display: none;
}

.mint-recent-button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  width: 100%;
  min-height: 104px;
  gap: 14px;
  border: 1px solid color-mix(in srgb, var(--mint-accent) 78%, #9fc6ff);
  border-radius: 8px;
  background: #11161d;
  color: #eef4ff;
  padding: 15px 17px;
  text-align: left;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 12px 30px rgba(0, 0, 0, 0.26);
}

.mint-recent-button:hover,
.mint-recent-button:focus-visible {
  border-color: color-mix(in srgb, var(--mint-accent) 60%, #ffffff);
  outline: none;
  transform: translateY(-1px);
}

.mint-recent-copy {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.mint-recent-label {
  color: #9aabc8;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mint-recent-copy strong {
  color: #eef4ff;
  font-size: clamp(18px, 3.2vw, 24px);
  font-weight: 850;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.mint-recent-avatars {
  display: inline-flex;
  align-items: center;
  min-width: 92px;
  padding-left: 8px;
}

.mint-recent-avatar {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-left: -8px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--mint-accent) 42%, #dfe8ff);
  border-radius: 999px;
  background:
    linear-gradient(135deg, var(--mint-accent-secondary), var(--mint-accent-tertiary)),
    #20252d;
  background-position: center;
  background-size: cover;
  color: var(--mint-accent-secondary-contrast);
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  box-shadow: 0 0 0 2px #11161d;
  flex: 0 0 auto;
}

.mint-recent-avatar[data-has-image="true"] {
  color: transparent;
}

.mint-recent-arrow {
  color: #9aabc8;
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
}

.mint-checker-card {
  display: grid;
  gap: 10px;
  margin: 0 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
  padding: 14px;
}

.mint-checker-card label {
  color: var(--text);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.mint-checker-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.mint-checker-row input {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--field);
  color: var(--text);
  padding: 0 12px;
  font: inherit;
  font-weight: 800;
}

.mint-checker-row input:focus {
  border-color: var(--mint-accent);
  outline: none;
}

.mint-checker-row .mini-button {
  min-width: 92px;
  width: auto;
  padding: 0 12px;
}

.mint-checker-note {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.mint-checker-note[data-state="ready"] {
  color: var(--mint-accent);
}

.mint-checker-note[data-state="checking"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--mint-accent-secondary);
}

.mint-checker-note[data-state="checking"]::before {
  content: "";
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border: 3px solid rgba(162, 216, 48, 0.25);
  border-top-color: currentColor;
  border-radius: 999px;
  animation: spin 800ms linear infinite;
}

.mint-checker-note[data-state="error"] {
  color: #ff8d8d;
}

.mint-checker-resolved {
  display: grid;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--mint-accent) 16%, transparent), transparent 62%),
    var(--field);
  padding: 9px;
}

.mint-checker-resolved span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.mint-checker-resolved strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.mint-checker-resolved small {
  color: var(--mint-accent);
  font-size: 11px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.mint-eligibility-results {
  display: grid;
  gap: 8px;
}

.mint-eligibility-results[hidden] {
  display: none;
}

.mint-eligibility-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--field);
  padding: 9px;
}

.mint-eligibility-result.is-eligible {
  border-color: var(--mint-accent);
}

.mint-eligibility-result.is-not-eligible {
  border-color: #7b3434;
}

.mint-eligibility-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.mint-eligibility-main strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.mint-eligibility-main span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.mint-eligibility-main .mint-phase-time,
.mint-eligibility-main .local-time-note {
  color: var(--muted);
  font-size: 11px;
}

.mint-eligibility-result.is-eligible .mint-eligibility-main span {
  color: var(--mint-accent);
}

.mint-eligibility-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

.mint-eligibility-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.mint-calendar-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  border: 1px solid var(--mint-accent-secondary);
  border-radius: 6px;
  background: var(--mint-accent-secondary);
  color: var(--mint-accent-secondary-contrast);
  padding: 0 9px;
  font: inherit;
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
}

.mint-calendar-button:hover,
.mint-calendar-button:focus-visible {
  border-color: var(--mint-accent);
  background: var(--mint-accent);
  color: var(--mint-accent-contrast);
  outline: none;
}

.mint-contact-card {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
  padding: 14px;
}

.mint-contact-card label {
  color: var(--text);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.mint-contact-card input {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--field);
  color: var(--text);
  padding: 0 12px;
  font: inherit;
  font-weight: 800;
}

.mint-contact-card input:focus {
  border-color: var(--mint-accent);
  outline: none;
}

.mint-contact-note {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.mint-contact-note[data-state="success"],
.mint-contact-note[data-state="ready"] {
  color: var(--mint-accent);
}

.mint-contact-note[data-state="checking"] {
  color: var(--mint-accent-secondary);
}

.mint-contact-note[data-state="warning"] {
  color: var(--mint-accent-secondary);
}

.mint-contact-note[data-state="error"] {
  color: #ff8d8d;
}

.quantity-row {
  gap: 8px;
  margin: 14px 0;
}

.quantity-row input {
  max-width: 120px;
  text-align: center;
}

.quantity-row .mini-button {
  width: 42px;
  padding: 0;
}

.mint-body .primary-action {
  background: var(--mint-accent);
  color: var(--mint-accent-contrast);
}

.mint-body .secondary-action,
.mint-body .mini-button {
  border-color: var(--mint-accent-secondary);
  background: var(--mint-accent-secondary);
  color: var(--mint-accent-secondary-contrast);
}

.mint-body .primary-action:disabled,
.mint-body .secondary-action:disabled,
.mint-body .mini-button:disabled {
  border-color: color-mix(in srgb, var(--line) 78%, var(--muted));
  background: color-mix(in srgb, var(--field) 82%, var(--muted));
  color: color-mix(in srgb, var(--muted) 88%, var(--text));
  box-shadow: none;
  opacity: 1;
}

.mint-confirmation-modal {
  position: fixed;
  z-index: 220;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(5, 7, 9, 0.72);
  padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  backdrop-filter: blur(8px);
}

.mint-confirmation-modal[hidden] {
  display: none;
}

.mint-recent-modal {
  position: fixed;
  z-index: 225;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(5, 7, 9, 0.72);
  padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  backdrop-filter: blur(8px);
}

.mint-recent-modal[hidden] {
  display: none;
}

.mint-recent-panel {
  position: relative;
  width: min(100%, 660px);
  max-height: min(88vh, 760px);
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--mint-accent) 62%, #9fc6ff);
  border-radius: 12px;
  background: #171c24;
  color: #eef4ff;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
  padding: clamp(24px, 5vw, 44px);
}

.mint-recent-close {
  position: absolute;
  top: 18px;
  right: 18px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #cdd8eb;
  padding: 0;
  font-size: 38px;
  font-weight: 300;
  line-height: 1;
}

.mint-recent-close:hover,
.mint-recent-close:focus-visible {
  color: #ffffff;
  outline: none;
}

.mint-recent-panel h2 {
  margin: 0 48px 32px 0;
  color: #eef4ff;
  font-size: clamp(38px, 6.4vw, 56px);
  font-weight: 400;
  line-height: 1;
}

.mint-recent-table-head,
.mint-recent-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(110px, auto) 52px;
  align-items: center;
  gap: 18px;
}

.mint-recent-table-head {
  border-bottom: 1px solid #313a49;
  color: #9aabc8;
  padding-bottom: 12px;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.mint-recent-table-head span:nth-child(3) {
  text-align: right;
}

.mint-recent-list {
  display: grid;
}

.mint-recent-row {
  border-bottom: 1px solid #313a49;
  padding: 18px 0;
}

.mint-recent-row:last-child {
  border-bottom: 0;
}

.mint-recent-person {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 14px;
}

.mint-recent-person .mint-recent-avatar {
  width: 46px;
  height: 46px;
  margin-left: 0;
  box-shadow: none;
}

.mint-recent-person > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.mint-recent-person strong,
.mint-recent-time,
.mint-recent-quantity {
  color: #eef4ff;
  font-size: clamp(18px, 3vw, 24px);
  font-weight: 700;
  line-height: 1.15;
}

.mint-recent-person strong {
  overflow-wrap: anywhere;
}

.mint-recent-person small {
  color: #9aabc8;
  font-size: 12px;
  font-weight: 750;
}

.mint-recent-time {
  color: #cdd8eb;
  font-weight: 650;
  white-space: nowrap;
}

.mint-recent-quantity {
  text-align: right;
}

.mint-recent-empty {
  margin: 20px 0 0;
  color: #cdd8eb;
  font-size: 16px;
  font-weight: 800;
}

.mint-confirmation-panel {
  position: relative;
  width: min(100%, 460px);
  overflow: hidden;
  border: 2px solid var(--mint-accent);
  border-radius: 18px;
  background:
    radial-gradient(circle at 18% 16%, var(--mint-accent-secondary-soft), transparent 34%),
    radial-gradient(circle at 80% 88%, var(--mint-accent-tertiary-soft), transparent 38%),
    var(--panel);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.44);
  padding: 28px;
  text-align: center;
}

.mint-confirmation-close {
  position: absolute;
  z-index: 3;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  color: var(--text);
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
}

.mint-confirmation-close:hover,
.mint-confirmation-close:focus-visible {
  border-color: var(--mint-accent);
  color: var(--mint-accent);
  outline: none;
}

.mint-confirmation-kicker {
  position: relative;
  z-index: 1;
  margin: 0 0 6px;
  color: var(--mint-accent);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mint-confirmation-cards {
  position: relative;
  z-index: 1;
  width: min(100%, 292px);
  height: 172px;
  margin: 4px auto 16px;
}

.mint-confirmation-card {
  position: absolute;
  top: 7px;
  left: 50%;
  display: grid;
  place-items: end center;
  width: 118px;
  aspect-ratio: 0.73;
  overflow: hidden;
  border: 2px solid var(--line);
  border-radius: 12px;
  background:
    linear-gradient(135deg, transparent 0 38%, rgba(255, 255, 255, 0.2) 38% 44%, transparent 44% 100%),
    linear-gradient(45deg, var(--mint-accent-secondary), var(--mint-accent-tertiary));
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.32);
  color: var(--mint-accent-secondary-contrast);
  padding: 10px 8px;
  transform-origin: center bottom;
}

.mint-confirmation-card::before {
  content: "✦";
  position: absolute;
  top: 18px;
  left: 18px;
  color: color-mix(in srgb, var(--mint-accent-secondary-contrast) 68%, transparent);
  font-size: 36px;
  line-height: 1;
}

.mint-confirmation-card strong {
  position: relative;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 999px;
  background: rgba(10, 12, 15, 0.68);
  color: #fff;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 950;
}

.mint-confirmation-card-1 {
  transform: translateX(-50%) rotate(-10deg);
}

.mint-confirmation-card-2 {
  transform: translateX(-50%) rotate(0deg) translateY(-5px);
}

.mint-confirmation-card-3 {
  transform: translateX(-50%) rotate(10deg);
}

.mint-confirmation-cards[data-count="1"] .mint-confirmation-card-1 {
  transform: translateX(-50%);
}

.mint-confirmation-cards[data-count="2"] .mint-confirmation-card-1 {
  transform: translateX(-78%) rotate(-9deg);
}

.mint-confirmation-cards[data-count="2"] .mint-confirmation-card-2 {
  transform: translateX(-22%) rotate(9deg);
}

.mint-confirmation-cards[data-count="3"] .mint-confirmation-card-1 {
  transform: translateX(-95%) rotate(-13deg);
}

.mint-confirmation-cards[data-count="3"] .mint-confirmation-card-2 {
  transform: translateX(-50%) translateY(-7px);
}

.mint-confirmation-cards[data-count="3"] .mint-confirmation-card-3 {
  transform: translateX(-5%) rotate(13deg);
}

.mint-confirmation-card-count {
  position: absolute;
  z-index: 2;
  right: 18px;
  bottom: 14px;
  display: grid;
  place-items: center;
  min-width: 40px;
  min-height: 40px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--mint-accent);
  color: var(--mint-accent-contrast);
  box-shadow: 3px 3px 0 var(--line);
  font-size: 14px;
  font-weight: 950;
}

.mint-confirmation-panel h2 {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--text);
  font-size: clamp(26px, 6vw, 38px);
  line-height: 1;
}

.mint-confirmation-message {
  position: relative;
  z-index: 1;
  margin: 10px auto 0;
  color: var(--text);
  font-size: 16px;
  font-weight: 850;
  line-height: 1.4;
}

.mint-confirmation-note {
  position: relative;
  z-index: 1;
  margin: 8px auto 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
}

.mint-confirmation-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  margin-top: 20px;
}

.mint-confirmation-actions .primary-action,
.mint-confirmation-actions .secondary-action,
.mint-confirmation-actions .mini-button {
  width: auto;
  min-height: 42px;
  padding-inline: 13px;
  text-decoration: none;
}

.mint-confirmation-confetti {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.mint-confirmation-confetti i {
  position: absolute;
  top: 34%;
  left: 50%;
  width: 8px;
  height: 14px;
  border-radius: 2px;
  background: var(--mint-accent);
  opacity: 0;
}

.mint-confirmation-confetti i:nth-child(3n + 1) {
  background: var(--mint-accent-secondary);
}

.mint-confirmation-confetti i:nth-child(3n + 2) {
  background: var(--mint-accent-tertiary);
}

.mint-confirmation-confetti.is-celebrating i {
  animation: mint-confetti 920ms cubic-bezier(0.14, 0.82, 0.3, 1) infinite;
}

.mint-confirmation-confetti i:nth-child(1) { --confetti-x: -168px; --confetti-y: 172px; --confetti-r: 246deg; }
.mint-confirmation-confetti i:nth-child(2) { --confetti-x: -126px; --confetti-y: 236px; --confetti-r: 166deg; }
.mint-confirmation-confetti i:nth-child(3) { --confetti-x: -72px; --confetti-y: 160px; --confetti-r: 324deg; }
.mint-confirmation-confetti i:nth-child(4) { --confetti-x: -34px; --confetti-y: 248px; --confetti-r: 112deg; }
.mint-confirmation-confetti i:nth-child(5) { --confetti-x: 22px; --confetti-y: 154px; --confetti-r: 294deg; }
.mint-confirmation-confetti i:nth-child(6) { --confetti-x: 64px; --confetti-y: 236px; --confetti-r: 202deg; }
.mint-confirmation-confetti i:nth-child(7) { --confetti-x: 118px; --confetti-y: 164px; --confetti-r: 342deg; }
.mint-confirmation-confetti i:nth-child(8) { --confetti-x: 164px; --confetti-y: 228px; --confetti-r: 150deg; }
.mint-confirmation-confetti i:nth-child(9) { --confetti-x: -192px; --confetti-y: 104px; --confetti-r: 280deg; }
.mint-confirmation-confetti i:nth-child(10) { --confetti-x: 188px; --confetti-y: 108px; --confetti-r: 98deg; }
.mint-confirmation-confetti i:nth-child(11) { --confetti-x: -102px; --confetti-y: 88px; --confetti-r: 210deg; }
.mint-confirmation-confetti i:nth-child(12) { --confetti-x: 102px; --confetti-y: 88px; --confetti-r: 320deg; }

@keyframes mint-confetti {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(0deg) scale(0.4);
  }
  12% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--confetti-x)), calc(-50% + var(--confetti-y))) rotate(var(--confetti-r)) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mint-confirmation-confetti.is-celebrating i {
    animation: none;
  }
}

body.light-page {
  color-scheme: light;
  --bg: #f7f8fb;
  --panel: #ffffff;
  --panel-2: #f2f4f4;
  --field: #ffffff;
  --line: #d5dbe0;
  --text: #111416;
  --ink: #111416;
  --muted: #53606c;
  --shadow: none;
}

@media (max-width: 1080px) {
  .studio-topbar {
    grid-template-columns: 1fr auto;
  }

  .brand-lockup {
    min-width: 0;
  }

  .nav-tabs {
    grid-column: 1 / -1;
    justify-content: start;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .wallet-actions {
    justify-self: end;
  }

  .hero-panel,
  .two-column,
  .three-column,
  .home-profile-panel,
  .home-social-panels,
  .public-profile-hero.has-link-stack,
  .feed-toolbar {
    grid-template-columns: 1fr;
  }

  .public-link-stack-panel {
    margin-top: 0;
  }

  .public-profile-hero-main {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .public-profile-nav {
    justify-content: flex-start;
  }

  .public-profile-nav-stack {
    max-width: 390px;
    justify-items: start;
  }

  .public-profile-nav-actions {
    justify-content: flex-start;
  }

  .profile-stats-panel p,
  .profile-stats-panel .profile-stats-note,
  .profile-stats-note,
  .profile-stats div {
    text-align: left;
  }

  .social-stat-button,
  .activity-filter-controls,
  .feed-tab-stack {
    justify-content: flex-start;
    justify-items: start;
  }

  .feed-grid,
  .compact-feed-grid,
  .launch-calendar-list.is-full-display {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-dashboard,
  .profile-dashboard.creator-profile-dashboard {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .public-profile-dashboard {
    grid-auto-rows: auto;
  }

  .profile-dashboard > .profile-dashboard-section {
    height: auto;
    max-height: none;
  }

  .calendar-row {
    grid-template-columns: 74px minmax(0, 1fr);
  }

  .calendar-row-media {
    width: 74px;
    height: 74px;
  }

  .calendar-row dl,
  .calendar-row .feed-card-actions {
    grid-column: 1 / -1;
  }

  .leaderboard-header,
  .collector-leaderboard-row {
    grid-template-columns: 74px minmax(0, 1fr);
  }

  .leaderboard-header span:last-child,
  .leaderboard-totals {
    grid-column: 1 / -1;
  }

  .calendar-row .feed-card-actions {
    justify-content: flex-start;
  }

  .admin-phase-sections,
  .mission-control-grid,
  .platform-auto-grid,
  .phase-auto-toggle-grid,
  .phase-auto-layout,
  .platform-audit-card dl,
  .report-line-row {
    grid-template-columns: 1fr;
  }

  .stepper {
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding-bottom: 16px;
    scrollbar-width: none;
  }

  .stepper::-webkit-scrollbar {
    display: none;
  }

  .creation-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .creation-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 780px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .bulk-airdrop-csv-row {
    grid-template-columns: 1fr;
  }

  .bulk-airdrop-csv-row .secondary-action {
    width: 100%;
  }

  .studio-topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    max-width: 100vw;
  }

  .brand-lockup {
    flex: 0 0 auto;
  }

  .nav-tabs {
    order: 2;
    flex: 1 0 100%;
    max-width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .nav-tabs::-webkit-scrollbar,
  .wallet-actions::-webkit-scrollbar {
    display: none;
  }

  .wallet-actions {
    order: 3;
    flex: 1 0 100%;
    max-width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    padding: 1px 0 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .notification-menu {
    flex: 0 0 auto;
  }

  .notification-panel {
    position: fixed;
    z-index: 125;
    top: var(--notification-panel-top, calc(env(safe-area-inset-top, 0px) + 124px));
    left: max(12px, env(safe-area-inset-left, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
    width: auto;
    max-height: calc(100svh - 144px);
    overflow: hidden;
    box-shadow: 4px 4px 0 var(--teal);
  }

  .notification-list {
    max-height: calc(100svh - 236px);
  }

  .notification-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  .notification-actions {
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    padding-left: 0;
  }

  .studio-topbar .nav-tab,
  .studio-topbar .primary-action,
  .studio-topbar .secondary-action {
    flex: 0 0 auto;
    min-height: 38px;
    max-width: 100%;
    padding: 0 11px;
    font-size: 14px;
    white-space: nowrap;
  }

  .studio-topbar #connectBtn {
    max-width: min(58vw, 260px);
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .workspace,
  .wizard-main {
    padding: 14px;
  }

  .workspace {
    padding: 14px;
  }

  .wizard-main {
    padding: 0;
  }

  .hero-panel,
  .form-grid,
  .form-grid.compact,
  .platform-admin-lock-steps,
  .stat-grid,
  .review-grid,
  .launch-strip,
  .launch-step-row,
  .creation-stats,
  .platform-stat-grid,
  .wallet-stats,
  .wallet-note,
  .home-app-grid,
  .notification-options,
  .profile-stats,
  .profile-identity,
  .profile-editor-body,
  .profile-wallet-add,
  .feed-grid,
  .compact-feed-grid,
  .launch-calendar-list.is-full-display,
  .feed-card-stats,
  .leaderboard-totals,
  .filename-match-example,
  .filename-match-example.inline-example,
  .filename-match-example.faq-example,
  .filename-match-example.compact-example,
  .choice-grid {
    grid-template-columns: 1fr;
  }

  .admin-metadata-file-field {
    grid-column: auto;
  }

  .launch-step-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .launch-step-combined-head {
    grid-template-columns: 1fr;
  }

  .launch-step-right-actions.launch-step-combined-actions {
    justify-content: flex-start;
  }

  .launch-step-card > button,
  .launch-step-right-actions,
  .launch-step-actions {
    grid-column: 1 / -1;
    justify-self: stretch;
  }

  .launch-step-right-actions {
    align-items: stretch;
  }

  .launch-step-actions .ghost-link {
    flex: 1;
  }

  .feed-phase-row {
    align-items: flex-start;
    justify-content: flex-start;
  }

  .feed-phase-eligibility {
    align-self: flex-start;
  }

  .edition-page-basics-grid,
  .edition-media-grid {
    grid-template-columns: 1fr;
  }

  .edition-page-basics-grid .draw-skin-field {
    grid-column: auto;
  }

  .wide-field {
    grid-column: auto;
  }

  .mint-page-media-field {
    grid-template-rows: auto auto;
  }

  .public-profile-edit-grid,
  .public-profile-edit-link-fields {
    grid-template-columns: 1fr;
  }

  .wizard-footer,
  .action-bar,
  .profile-editor-footer,
  .profile-unsaved-actions {
    grid-template-columns: 1fr;
  }

  .profile-editor-footer,
  .profile-unsaved-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .profile-editor-panel,
  .public-profile-shell,
  .admin-phase-card,
  .admin-home,
  .admin-detail {
    max-width: 100%;
    min-width: 0;
  }

  .profile-editor-heading {
    align-items: stretch;
  }

  .profile-editor-heading > div,
  .panel-heading > div,
  .admin-phase-card-heading > div {
    min-width: 0;
  }

  .profile-editor-heading h2,
  .admin-phase-card-heading h3 {
    overflow-wrap: anywhere;
  }

  .profile-editor-heading-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
    width: 100%;
    justify-content: stretch;
    gap: 8px;
  }

  .profile-editor-heading-actions .primary-action,
  .profile-editor-heading-actions .secondary-action,
  .profile-editor-tabs .profile-editor-tab {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 0 10px;
    font-size: 16px;
    white-space: normal;
  }

  .profile-editor-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
    gap: 8px;
  }

  .wizard-step.active {
    min-height: 0;
    padding: 16px;
    box-shadow: 6px 6px 0 var(--ink);
    animation: mobile-card-in 120ms ease-out;
  }

  @keyframes mobile-card-in {
    from {
      transform: translateY(3px);
    }

    to {
      transform: translateY(0);
    }
  }

  .wizard-footer .status-line {
    order: -1;
  }

  .question-block.with-action,
  .panel-heading,
  .file-drop,
  .wallet-note,
  .input-row,
  .platform-otp-actions,
  .admin-detail-header {
    align-items: stretch;
    flex-direction: column;
  }

  .platform-otp-actions {
    grid-template-columns: 1fr;
  }

  .admin-home-toolbar,
  .admin-detail-header,
  .creator-report-grid,
  .creator-report-export-row {
    grid-template-columns: 1fr;
  }

  .admin-manual-load span {
    grid-template-columns: 1fr;
  }

  .admin-type-filter {
    width: 100%;
  }

  .admin-home-actions,
  .admin-heading-actions {
    width: 100%;
  }

  .admin-home-actions {
    justify-content: flex-start;
  }

  .admin-home-actions button {
    flex: 1 1 180px;
    min-width: 0;
    white-space: normal;
  }

  .creator-report-inline-fields {
    grid-template-columns: 1fr;
  }

  .admin-heading-actions,
  .creator-report-heading-actions,
  .creator-report-actions,
  .creator-report-filter-actions {
    justify-content: flex-start;
  }

  .platform-router-row {
    grid-template-columns: 1fr auto;
  }

  .platform-router-row input {
    grid-column: 1 / -1;
  }

  .router-address-card {
    grid-template-columns: 1fr auto;
  }

  .router-address-card > div {
    grid-column: 1 / -1;
  }

  .admin-address-row {
    grid-template-columns: 1fr;
  }

  .address-copy-icon {
    justify-self: start;
  }

  .admin-detail-actions {
    justify-content: stretch;
  }

  .admin-detail-actions button {
    flex: 1;
  }

  .admin-home-return {
    justify-self: stretch;
    order: -1;
  }

  .admin-section-heading {
    display: grid;
    align-items: start;
  }

  .admin-creation-row,
  .creation-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .admin-creation-actions,
  .creation-actions {
    justify-content: flex-start;
  }

  .admin-creation-actions .mini-button,
  .creation-actions .mini-button {
    flex: 1 1 118px;
  }

  .admin-phase-card-heading {
    display: grid;
    justify-items: start;
  }

  .admin-phase-card {
    overflow: hidden;
  }

  .admin-phase-card-heading .contract-verification-badge {
    justify-self: start;
    max-width: 100%;
    white-space: normal;
  }

  .admin-phase-sections,
  .admin-phase-sections section,
  .admin-phase-sections label {
    width: 100%;
  }

  .admin-phase-sections section,
  .admin-phase-sections label,
  .admin-phase-sections input,
  .admin-phase-sections button {
    max-width: 100%;
    min-width: 0;
  }

  .admin-phase-sections input:not([type="checkbox"]) {
    width: 100%;
    font-size: 16px;
  }

  .admin-phase-sections .check-row {
    align-self: stretch;
  }

  .admin-phase-card-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .admin-phase-update-btn,
  .admin-phase-remove-btn,
  .admin-auto-allow-list-actions .secondary-action {
    width: 100%;
    white-space: normal;
  }

  .metadata-heading-actions {
    align-items: flex-start;
    flex-direction: row;
    justify-content: flex-start;
  }

  .file-drop input {
    max-width: none;
  }

  .metadata-csv-drop {
    align-items: center;
    flex-direction: row;
  }

  .metadata-csv-drop input {
    flex: 0 0 100%;
  }

  .button-grid {
    grid-template-columns: 1fr;
  }

  .tutorial-grid {
    grid-template-columns: 1fr;
  }

  .home-profile-panel {
    min-height: 0;
    padding-top: 20px;
  }

  .profile-home-link-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 155px), 1fr));
    width: 100%;
  }

  .profile-home-link-actions .secondary-action {
    width: 100%;
    min-width: 0;
    white-space: normal;
  }

  .home-welcome-panel {
    min-height: min(520px, calc(100svh - 96px));
    padding: clamp(20px, 6vw, 36px);
  }

  .home-welcome-panel .welcome-mantra {
    max-width: 100%;
    font-size: clamp(34px, 10.8vw, 60px);
    line-height: 1;
    row-gap: 0.12em;
  }

  .home-welcome-panel .welcome-mantra > span:first-child {
    flex: 0 0 100%;
    max-width: 100%;
    white-space: normal;
  }

  .welcome-mantra mark {
    max-width: 100%;
  }

  .profile-avatar {
    width: min(58vw, 170px);
  }

  .home-app-tile {
    aspect-ratio: auto;
    min-height: 220px;
  }

  .feed-toolbar {
    align-items: stretch;
  }

  .art-feed-panel > .panel-heading {
    grid-template-columns: 1fr;
  }

  .art-feed-heading-actions {
    justify-content: flex-start;
  }

  .activity-item,
  .social-person-row,
  .follow-suggestion-row,
  .profile-link-row-main {
    grid-template-columns: 1fr;
  }

  .home-suggestions-panel .suggestion-list {
    max-height: min(58svh, calc((54px * 4) + (6px * 3)));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 2px;
  }

  .home-suggestions-panel .follow-suggestion-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    align-items: center;
    min-height: 54px;
    padding: 5px;
  }

  .home-suggestions-panel .follow-suggestion-main {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 7px;
    min-width: 0;
  }

  .home-suggestions-panel .follow-suggestion-main > span:last-child {
    min-width: 0;
  }

  .home-suggestions-panel .follow-suggestion-main strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .home-suggestions-panel .follow-suggestion-main small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .home-suggestions-panel .social-person-actions {
    align-self: center;
    justify-content: flex-end;
    min-width: 0;
  }

  .home-suggestions-panel .follow-suggestion-row .suggestion-follow-button.mini-button {
    min-height: 30px;
    padding: 0 11px;
    font-size: 12px;
    white-space: nowrap;
  }

  .profile-link-row-actions {
    justify-content: flex-start;
  }

  .profile-referral-gate,
  .profile-referral-history-row {
    grid-template-columns: 1fr;
  }

  .profile-dashboard,
  .profile-dashboard.creator-profile-dashboard {
    grid-template-columns: 1fr;
  }

  .public-link-stack-solo .public-link-stack-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .public-link-stack-solo .public-link-tile.expanded {
    grid-column: span 1;
  }

  .public-profile-shell .profile-identity,
  .public-profile-hero-main {
    grid-template-columns: 1fr;
  }

  .feed-profile-copy {
    grid-template-columns: 1fr;
    grid-template-areas:
      "topline"
      "title"
      "meta"
      "message"
      "actions"
      "roles";
  }

  .feed-profile-role-slot .profile-role-panel {
    --profile-role-card-min: 82px;
  }

  .feed-profile-role-slot .profile-role-badges {
    gap: 5px;
  }

  .feed-profile-role-slot .profile-role-badge {
    padding: 6px 7px;
  }

  .public-profile-shell .feed-profile-avatar {
    width: min(58vw, 170px);
  }

  .public-profile-title-actions,
  .public-profile-nav-actions {
    justify-content: flex-start;
  }

  .public-profile-shell .feed-profile-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .public-profile-shell .feed-profile-stats div {
    justify-items: start;
    text-align: left;
  }

  .public-profile-shell .collected-stat-value,
  .feed-profile-stats .collected-stat-value {
    justify-items: start;
    text-align: left;
  }

  .profile-activity-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "avatar"
      "action"
      "body";
  }

  .profile-activity-row small {
    white-space: normal;
  }

  .profile-activity-side-action {
    justify-content: flex-start;
  }

  .profile-activity-row .mini-button {
    justify-self: start;
  }

  .social-person-actions {
    justify-content: flex-start;
  }

  .art-feed-heading-actions {
    align-items: stretch;
    flex-direction: column;
    min-width: 0;
  }

  .feed-search-label {
    min-width: 0;
  }

  .mint-shell {
    grid-template-columns: 1fr;
  }

  .mint-top-actions {
    top: 14px;
    right: 14px;
    max-width: calc(100vw - 28px);
  }

  .mint-top-action {
    min-height: 40px;
    padding: 0 13px;
    font-size: 13px;
  }

  .mint-media {
    min-height: 42vh;
  }

  .mint-page-banner {
    margin: 14px;
    padding: 11px 12px;
  }

  .mint-page-logo {
    top: 14px;
    left: 14px;
    max-width: min(180px, calc(100% - 28px));
    max-height: 56px;
    padding: 6px 8px;
  }

  .mint-opensea-link {
    top: auto;
    right: 14px;
    bottom: 14px;
  }

  .mint-media-description {
    top: auto;
    bottom: 14px;
    left: 14px;
    width: calc(100% - 28px);
    max-height: 30vh;
  }

  .mint-media.has-opensea-link .mint-media-description {
    width: calc(100% - 84px);
  }

  .mint-media.has-page-logo .mint-media-description {
    top: auto;
  }

  .mint-media-description-content {
    max-height: 30vh;
    padding: 14px 46px 14px 14px;
  }

  .mint-panel {
    min-height: 58vh;
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-top: 76px;
  }

  .mint-phase-item {
    grid-template-columns: 1fr;
    grid-template-areas:
      "main"
      "status"
      "actions"
      "eligibility";
    align-items: stretch;
  }

  .mint-phase-state,
  .mint-phase-actions,
  .mint-phase-eligibility {
    justify-self: start;
  }

  .mint-phase-actions {
    display: flex;
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
  }

  .mint-phase-actions .mint-calendar-button {
    max-width: 100%;
    white-space: nowrap;
  }

  .mint-recent-button {
    min-height: 92px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 13px;
  }

  .mint-recent-avatars {
    grid-column: 1;
    min-width: 0;
  }

  .mint-recent-arrow {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .mint-checker-row,
  .mint-eligibility-result {
    grid-template-columns: 1fr;
  }

  .mint-eligibility-state {
    justify-self: start;
    white-space: normal;
  }

  .mint-eligibility-actions {
    justify-content: flex-start;
  }

  .mint-recent-panel {
    max-height: calc(100vh - 28px);
    padding: 24px 18px;
  }

  .mint-recent-table-head,
  .mint-recent-row {
    grid-template-columns: minmax(0, 1fr) minmax(78px, auto) 38px;
    gap: 10px;
  }

  .mint-recent-person {
    gap: 10px;
  }

  .mint-recent-person .mint-recent-avatar {
    width: 38px;
    height: 38px;
  }

  .mint-recent-time {
    white-space: normal;
  }
}

@media (max-width: 560px) {
  .studio-topbar {
    padding: 8px 10px;
  }

  .wallet-actions {
    gap: 6px;
  }

  .notification-bell {
    width: 40px;
    height: 38px;
  }

  .notification-panel {
    top: var(--notification-panel-top, calc(env(safe-area-inset-top, 0px) + 134px));
    left: 10px;
    right: 10px;
    padding: 10px;
  }

  .notification-panel-head {
    align-items: start;
  }

  .notification-panel-head .compact-action {
    min-height: 34px;
    padding-inline: 9px;
    font-size: 13px;
  }

  .notification-list {
    max-height: calc(100svh - 238px);
  }

  .notification-main strong {
    font-size: 13px;
  }

  .notification-main small {
    font-size: 10px;
  }

  .user-discovery-row {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .user-discovery-actions {
    justify-content: start;
    padding-left: 54px;
  }

  .profile-editor-panel,
  .panel,
  .wizard-step.active {
    padding: 12px;
  }

  .profile-editor-heading-actions,
  .profile-editor-tabs,
  .profile-home-link-actions {
    grid-template-columns: 1fr;
  }

  .profile-editor-heading-actions .primary-action,
  .profile-editor-heading-actions .secondary-action,
  .profile-home-link-actions .secondary-action,
  .profile-editor-tabs .profile-editor-tab {
    min-height: 38px;
    font-size: 15px;
  }

  .admin-heading-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-heading-actions .secondary-action {
    grid-column: 1 / -1;
  }

  .admin-view-tab,
  .admin-heading-actions .secondary-action {
    width: 100%;
    min-width: 0;
    white-space: normal;
  }

  .admin-creation-stats,
  .admin-draft-row .creation-stats,
  .creation-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-phase-card {
    padding: 12px;
  }

  .platform-auto-option {
    grid-template-columns: minmax(0, 1fr) 76px auto;
  }

  .phase-auto-stack-option {
    grid-template-columns: minmax(0, auto) auto;
  }

  .platform-auto-option select {
    grid-column: 1 / -1;
  }

  .brand-lockup img {
    width: 72px;
  }

  h1 {
    font-size: 26px;
  }

  h2 {
    font-size: 20px;
  }

  .home-welcome-panel .welcome-mantra {
    font-size: clamp(32px, 9.8vw, 48px);
  }

  .mint-panel h1 {
    font-size: 32px;
  }
}