* {
      box-sizing: border-box;
    }
    body {
      margin: 0;
      background: #eceef2;
      color: #252a35;
      font:
        16px/1.6 system-ui,
        sans-serif;
    }
    header {
      padding: 18px 28px;
      background: #fff;
      border-bottom: 1px solid #d9dce4;
      display: flex;
      align-items: center;
      gap: 20px;
    }
    h1 {
      font-size: 25px;
      margin: 0;
      letter-spacing: 0.04em;
    }
    header span {
      font-size: 14px;
      color: #667080;
    }
    main {
      max-width: 1150px;
      margin: auto;
      padding: 24px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 310px;
      gap: 24px;
    }
    .stage {
      background: white;
      border: 1px solid #d9dce4;
      border-radius: 16px;
      overflow: hidden;
      display: grid;
      place-items: center;
    }
    canvas {
      width: 100%;
      height: auto;
      max-height: 78vh;
      object-fit: contain;
    }
    aside {
      background: white;
      border-radius: 16px;
      padding: 24px;
      align-self: start;
    }
    h2 {
      margin: 0 0 20px;
      font-size: 20px;
    }
    label {
      display: block;
      margin: 22px 0 8px;
    }
    label output {
      float: right;
      color: #657083;
      font-variant-numeric: tabular-nums;
    }
    input[type="range"] {
      width: 100%;
      accent-color: #5654d8;
      cursor: pointer;
      min-height: 28px;
    }
    #hue {
      accent-color: #aa5ca6;
    }
    .swatches {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin: 20px 0;
    }
    .swatches button {
      width: 32px;
      height: 32px;
      border: 2px solid #fff;
      border-radius: 50%;
      box-shadow: 0 0 0 1px #c5c9d2;
      cursor: pointer;
    }
    .actions {
      display: grid;
      gap: 10px;
      margin-top: 26px;
    }
    button {
      font: inherit;
      padding: 10px;
      border: 1px solid #d1d5df;
      border-radius: 8px;
      background: #fff;
      cursor: pointer;
    }
    button.primary {
      background: #514fd3;
      color: #fff;
      border-color: #514fd3;
    }
    button:disabled {
      opacity: 0.4;
      cursor: wait;
    }
    button:focus-visible,
    input:focus-visible {
      outline: 3px solid #818cf8;
      outline-offset: 3px;
    }
    p {
      font-size: 14px;
      color: #677080;
    }
    #status {
      min-height: 22px;
    }
    .view {
      display: flex;
      gap: 8px;
    }
    .view button {
      flex: 1;
    }
    .view button[aria-pressed="true"] {
      background: #eeedff;
      border-color: #514fd3;
      color: #4543b7;
    }
    @media (max-width: 700px) {
      main {
        grid-template-columns: 1fr;
        padding: 12px;
        gap: 12px;
      }
      canvas {
        max-height: 53vh;
      }
      aside {
        padding: 20px;
      }
      header {
        padding: 12px 20px;
      }
      label {
        margin-top: 12px;
      }
    }
    main {
      max-width: 1050px;
      display: flex;
      flex-direction: column;
      gap: 24px;
    }
    .preview-panel {
      background: #fff;
      border: 1px solid #d9dce4;
      border-radius: 16px;
      overflow: hidden;
    }
    .preview-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 12px 20px;
      border-bottom: 1px solid #e8eaf0;
      font-weight: 600;
    }
    .preview-toolbar .view {
      max-width: 260px;
      flex: 1;
      font-weight: 400;
    }
    .stage {
      border: 0;
      border-radius: 0;
      background: linear-gradient(135deg, #fafbff, #f1f2f8);
    }
    #preview {
      display: block;
      width: 100%;
      max-height: 64vh;
      min-height: 280px;
    }
    .section-intro {
      margin-bottom: 16px;
    }
    .section-intro h2 {
      margin: 0;
    }
    .section-intro p {
      margin: 4px 0 0;
    }
    .style-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 20px;
    }
    .control-card {
      min-width: 0;
      background: #fff;
      border: 1px solid #d9dce4;
      border-radius: 16px;
      padding: 22px;
    }
    .card-heading {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
    }
    .card-heading h2 {
      margin: 0;
    }
    .count {
      font-size: 12px;
      color: #687080;
      background: #f1f2f7;
      border-radius: 20px;
      padding: 3px 10px;
    }
    .style-options {
      display: flex;
      gap: 12px;
      overflow-x: auto;
      padding: 3px 3px 12px;
      min-height: 166px;
    }
    .style-option {
      position: relative;
      flex: 0 0 124px;
      padding: 8px;
      border: 2px solid #e2e4ec;
      border-radius: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      font-size: 13px;
    }
    .style-option canvas {
      width: 104px;
      height: 104px;
      max-height: none;
      object-fit: contain;
      background: #f5f6fa;
      border-radius: 8px;
    }
    .style-option[aria-pressed="true"] {
      border-color: #514fd3;
      background: #f3f2ff;
      color: #4543b7;
    }
    .selection-label {
      font-size: 11px;
      color: #514fd3;
      min-height: 18px;
    }
    h3 {
      font-size: 15px;
      margin: 18px 0 4px;
      padding-top: 16px;
      border-top: 1px solid #e8eaf0;
    }
    .control-card label {
      margin: 14px 0 4px;
    }
    .control-card .swatches {
      margin: 16px 0;
    }
    .skin-card {
      margin-top: 20px;
    }
    .skin-card h2 {
      margin-bottom: 10px;
    }
    .skin-controls {
      max-width: 600px;
    }
    .save-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      padding: 0 0 20px;
    }
    .save-bar p {
      margin: 0;
    }
    .save-bar button {
      padding: 12px 24px;
    }
    @media (max-width: 700px) {
      .style-grid {
        grid-template-columns: 1fr;
      }
      .control-card {
        padding: 18px;
      }
      .preview-toolbar {
        padding: 10px 12px;
      }
      #preview {
        max-height: 53vh;
        min-height: 240px;
      }
      .save-bar {
        align-items: stretch;
        flex-direction: column;
      }
      .style-options {
        min-height: 156px;
      }
    }
    /* Keep the result visible beside the styling controls. */
    main {
      max-width: 1440px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(340px, 440px);
      align-items: start;
      gap: 24px;
    }
    .preview-panel {
      position: sticky;
      top: 20px;
      grid-column: 1;
      grid-row: 1;
    }
    #preview {
      max-height: calc(100vh - 150px);
      min-height: 280px;
    }
    .wardrobe {
      grid-column: 2;
      grid-row: 1;
      min-width: 0;
    }
    .style-grid {
      grid-template-columns: 1fr;
      gap: 20px;
    }
    .save-bar {
      grid-column: 2;
      grid-row: 2;
      flex-direction: column;
      align-items: stretch;
    }
    @media (max-width: 800px), (pointer: coarse) and (max-width: 1024px) {
      main {
        display: flex;
        flex-direction: column;
        padding: 12px;
        gap: 16px;
      }
      .preview-panel {
        position: sticky;
        top: 0;
        z-index: 2;
        width: 100%;
        box-shadow: 0 4px 16px #252a3514;
      }
      #preview {
        height: 60vh;
        height: 60svh;
        max-height: none;
        min-height: 0;
      }
      #preview[data-zoomed="true"] {
        object-fit: cover;
      }
      .preview-toolbar {
        padding: 6px 12px;
      }
      .preview-toolbar button {
        padding: 6px 10px;
      }
      .wardrobe,
      .save-bar {
        width: 100%;
      }
      .style-grid {
        grid-template-columns: 1fr;
      }
    }
    .style-options {
      gap: 8px;
      min-height: 0;
      padding-bottom: 8px;
    }
    .style-option {
      flex-basis: 92px;
      padding: 6px;
      gap: 3px;
      font-size: 12px;
    }
    .style-option canvas {
      width: 72px;
      height: 72px;
    }
    .selection-label {
      font-size: 10px;
      min-height: 16px;
    }
    /* Compact styling panel. */
    @media (min-width: 801px) and (pointer: fine), (min-width: 801px) and (pointer: none), (min-width: 1025px) {
      main {
        grid-template-columns: minmax(0, 1fr) 340px;
        gap: 18px;
      }
    }
    .wardrobe .section-intro {
      margin-bottom: 10px;
    }
    .wardrobe .section-intro h2 {
      font-size: 18px;
    }
    .wardrobe .section-intro p {
      font-size: 12px;
      line-height: 1.5;
      margin-top: 3px;
    }
    .wardrobe .style-grid {
      gap: 12px;
    }
    .wardrobe .control-card {
      padding: 14px;
      border-radius: 12px;
    }
    .wardrobe .card-heading {
      margin-bottom: 8px;
    }
    .wardrobe h2 {
      font-size: 17px;
    }
    .wardrobe .count {
      font-size: 11px;
      padding: 2px 8px;
    }
    .wardrobe h3 {
      font-size: 13px;
      margin: 8px 0 2px;
      padding-top: 8px;
    }
    .wardrobe .control-card label {
      font-size: 13px;
      line-height: 1.4;
      margin: 7px 0 0;
    }
    .wardrobe input[type="range"] {
      display: block;
      min-height: 22px;
      height: 22px;
      margin: 0;
      width: 100%;
    }
    .wardrobe .control-card .swatches {
      gap: 8px;
      margin: 10px 0;
    }
    .wardrobe .swatches button {
      width: 26px;
      height: 26px;
      padding: 0;
    }
    .wardrobe .control-card > button,
    .wardrobe .skin-controls > button {
      font-size: 12px;
      padding: 6px 10px;
      line-height: 1.4;
    }
    .wardrobe .skin-card {
      margin-top: 12px;
    }
    .wardrobe .skin-card h2 {
      margin-bottom: 6px;
    }
    .save-bar {
      gap: 8px;
      padding-bottom: 12px;
    }
    .save-bar p {
      font-size: 12px;
      line-height: 1.5;
    }
    .save-bar button {
      font-size: 14px;
      padding: 9px 16px;
    }
    .style-options {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 5px;
    }
    .style-options .style-option {
      min-width: 0;
      padding: 4px 2px;
      font-size: 10px;
    }
    .style-options canvas {
      width: 100%;
      height: auto;
      aspect-ratio: 1;
    }
    .style-options .selection-label {
      font-size: 9px;
    }
    .style-options button:disabled {
      cursor: default;
    }
    #preview {
      user-select: none;
      -webkit-user-select: none;
    }
  

    @media (max-width: 800px), (pointer: coarse) and (max-width: 1024px) {
      .style-options {
        grid-template-columns: repeat(5, minmax(0, 56px));
        justify-content: start;
        gap: 6px;
      }
    }
  

    .success-dialog {
      width: min(380px, calc(100vw - 32px));
      max-height: calc(100dvh - 32px);
      padding: 36px 28px 28px;
      border: 1px solid #fff;
      border-radius: 28px;
      background: linear-gradient(155deg, #fff 25%, #f6f1ff 75%, #fff0f5);
      color: #39324e;
      text-align: center;
      box-shadow: 0 24px 80px #30204330;
      overflow: auto;
    }
    .success-dialog[open] {
      animation: success-appear 0.22s ease-out;
    }
    .success-dialog::backdrop {
      background: #302b4559;
      backdrop-filter: blur(4px);
    }
    .success-close {
      position: absolute;
      right: 12px;
      top: 10px;
      width: 36px;
      height: 36px;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: transparent;
      color: #82758f;
      font-size: 25px;
      line-height: 1;
    }
    .success-close:hover {
      background: #eee6f6;
    }
    .success-emblem {
      position: relative;
      width: 104px;
      height: 90px;
      margin: 0 auto 14px;
      display: grid;
      place-items: center;
    }
    .success-emblem span {
      display: grid;
      place-items: center;
      width: 72px;
      height: 72px;
      border: 5px solid #fff;
      border-radius: 25px;
      background: #e6dcfa;
      color: #7960ac;
      font-size: 36px;
      box-shadow: 0 6px 16px #9073b820;
      transform: rotate(-8deg);
    }
    .success-emblem i,
    .success-emblem b {
      position: absolute;
      font-style: normal;
      font-weight: 400;
    }
    .success-emblem i {
      right: 0;
      top: 0;
      color: #d8a3b6;
      font-size: 25px;
    }
    .success-emblem b {
      left: 0;
      bottom: 0;
      color: #a48acb;
      font-size: 24px;
    }
    .success-caption {
      color: #8c779f;
      font-size: 10px;
      letter-spacing: 0.2em;
      font-weight: 600;
    }
    .success-dialog h2 {
      font-size: 23px;
      letter-spacing: 0.03em;
      margin: 8px 0 14px;
    }
    .success-dialog .success-part {
      display: inline-block;
      border: 1px solid #e4d9f0;
      background: #ffffffb3;
      border-radius: 20px;
      padding: 5px 16px;
      margin: 0;
      color: #775d94;
      font-size: 13px;
      font-weight: 600;
    }
    .success-dialog #uploadSuccessMessage {
      font-size: 13px;
      line-height: 1.8;
      color: #82748e;
      margin: 16px 0 24px;
      overflow-wrap: anywhere;
    }
    .success-done {
      width: 100%;
      border: 0;
      border-radius: 14px;
      background: #8266ae;
      color: #fff;
      padding: 13px 16px;
      font-size: 14px;
      box-shadow: 0 4px 12px #8266ae25;
    }
    .success-done:hover {
      background: #715599;
    }
    .success-done span {
      margin-left: 12px;
    }
    .success-dialog button:focus-visible {
      outline: 3px solid #b99dd9;
      outline-offset: 3px;
    }
    @keyframes success-appear {
      from {
        opacity: 0;
        transform: translateY(10px) scale(0.97);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .success-dialog[open] {
        animation: none;
      }
    }
  

    .upload-panel {
      margin-bottom: 12px;
    }
    .upload-panel summary {
      cursor: pointer;
      font-weight: 600;
    }
    .upload-panel select,
    .upload-panel input[type="file"] {
      max-width: 100%;
      width: 100%;
      font: inherit;
      font-size: 13px;
      padding: 7px;
      border: 1px solid #d1d5df;
      border-radius: 6px;
    }
    .upload-panel p {
      font-size: 12px;
    }
    .upload-panel button {
      margin: 4px 0;
    }
    .upload-panel select:focus-visible {
      outline: 3px solid #818cf8;
    }
  

    #preview[data-zoomed="true"] {
      object-fit: cover;
    }