* {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background: url(https://maker.necrophantasia.com/sitely/tile.png) repeat !important;
      display: flex;
      flex-direction: column;
      background-color: #ffef9f !important;
      color: #000000;
    }

    .wrap {
      max-width: 1200px;
      margin: 0 auto;
      padding: 24px;
    }

    .hero {
      border: 1px solid rgba(255, 255, 255, .08);
      margin-bottom: 24px;
    }

    h1,
    h2,
    h3,
    h4 {
      margin: 0 0 10px;
    }

    h1 {
      font-size: clamp(1.9rem, 4vw, 3rem);
    }

    h2 {
      font-size: 1.35rem;
    }

    h3 {
      font-size: 1.05rem;
    }

    p,
    label,
    small {
      color: #000000;
    }

    .grid {
      display: grid;
      grid-template-columns: 1.08fr .92fr;
      gap: 24px;
      align-items: start;
    }

    .stack {
      display: grid;
      gap: 24px;
    }

    .panel {
      padding: 20px;
      background: rgb(255 255 255 / 71%);
      border-style: solid;
      border-color: #cf6f4d;
    }

    .row {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 12px;
      margin-bottom: 12px;
    }

    .field {
      display: grid;
      gap: 8px;
    }

    .col-12 {
      grid-column: span 12;
    }

    .col-8 {
      grid-column: span 8;
    }

    .col-6 {
      grid-column: span 6;
    }

    .col-4 {
      grid-column: span 4;
    }

    .col-3 {
      grid-column: span 3;
    }

    input,
    textarea,
    select,
    button {
      font: inherit;
      border-radius: 12px;
      border: 1px solid #8152bc;
    }

    input,
    textarea,
    select {
      width: 100%;
      background: #d8bcfa;
      color: #000000;
      padding: 12px 14px;
      outline: none;
    }

    textarea {
      min-height: 84px;
      resize: vertical;
    }

    input:focus,
    textarea:focus,
    select:focus {
      border-color: #8152bc;
      box-shadow: 0 0 0 3px rgba(142, 156, 255, 0.59);
    }

    button {
      background: #8152bc;
      color: white;
      border: none;
      padding: 12px 16px;
      font-weight: 700;
      transition: transform .12s ease, opacity .12s ease;
    }

    button:hover {
      transform: translateY(-1px);
    }

    button.secondary {
      background: rgba(142, 156, 255, 0.59);
      border: 1px solid rgba(255, 255, 255, .12);
      color: #ffffff;
    }

    .third,
    button.third {
      background: rgba(205, 205, 205, 0.59);
      color: #ffffff;

      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 12px 16px;
      border-radius: 12px;
      cursor: pointer;
    }

    button.ghost {
      background: transparent;
      border: 1px dashed rgba(255, 255, 255, .18);
      color: rgb(151, 59, 59);
    }

    button.danger {
      background: rgb(186, 68, 68);
      color: #ffffff;
      border: 1px solid rgba(255, 122, 154, .28);
    }

    .actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 8px;
    }

    .result-card,
    .question-card,
    .answer-card {
      background: rgba(255, 255, 255, .025);
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 16px;
      padding: 14px;
    }

    .result-card+.result-card,
    .question-card+.question-card,
    .answer-card+.answer-card {
      margin-top: 12px;
    }

    .card-top {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      margin-bottom: 12px;
    }

    .muted-box {
      border: 1px dashed rgba(255, 255, 255, .14);
      background: red;
      border-radius: 16px;
      padding: 14px;
    }

    .preview {
      position: sticky;
      top: 18px;
    }

    .preview-box {
      background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .02));
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 18px;
      padding: 16px;
      min-height: 260px;
    }

    .preview-result {
      display: grid;
      gap: 12px;
      margin-top: 16px;
    }

    .preview-result img {
      width: 100%;
      max-height: 220px;
      object-fit: cover;
      border-radius: 14px;
      border: 1px solid rgba(255, 255, 255, .08);
      background: rgba(255, 255, 255, .04);
    }

    .small-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    details summary {
      color: #000000;
      font-weight: 700;
      margin-bottom: 10px;
    }

    code.inline {
      background: rgb(189 193 240);
      border-radius: 8px;
      padding: 2px 6px;
      color: #fff3c5;
    }

    @media (max-width: 960px) {
      .grid {
        grid-template-columns: 1fr;
      }

      .preview {
        position: static;
      }

      .col-8,
      .col-6,
      .col-4,
      .col-3 {
        grid-column: span 12;
      }
    }