/* Animated angle for the rotating gradient border */
  @property --a {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
  }

  @keyframes rotateGlow {
    to { --a: 360deg; }
  }
  :root{
    --bg:#f7f5ef;
    --card:#ffffff;
    --text:#171717;
    --muted:#686868;
    --line:#dedbd3;
    --accent:#245c46;
    --accent-soft:#e7f0eb;
    --warn:#8b5a2b;
  }
  *{box-sizing:border-box}
  body{
    margin:0;
    font-family: ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, -apple-system, sans-serif;
    background:var(--bg);
    color:var(--text);
    line-height:1.45;
  }
  .wrap{
    width:min(760px, calc(100% - 28px));
    margin:0 auto;
    padding:28px 0 60px;
  }
  header{margin-bottom:20px}
  h1{font-size:clamp(2rem,7vw,3.8rem);line-height:.95;margin:0 0 14px}
  .lead{font-size:1.08rem;color:var(--muted);max-width:620px}
  .badge{
    display:inline-block;
    background:var(--accent-soft);
    color:var(--accent);
    font-weight:700;
    border-radius:999px;
    padding:6px 10px;
    margin-bottom:14px;
  }
  section{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:20px;
    padding:20px;
    margin:14px 0;
  }
  h2{font-size:1.35rem;margin:0 0 6px}
  .help{color:var(--muted);font-size:.94rem;margin:0 0 14px}
  label{display:block;font-weight:700;margin:14px 0 7px}
  input[type="text"], textarea, select{
    width:100%;
    border:1.5px solid var(--line);
    border-radius:12px;
    padding:12px 13px;
    font:inherit;
    color:var(--text);
    background:#fff;
  }
  textarea{min-height:92px;resize:vertical}
  .choices{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  .choice input{position:absolute;opacity:0}
  .choice span{
    display:block;
    position:relative;
    isolation:isolate;
    border:1.5px solid var(--line);
    border-radius:14px;
    padding:14px;
    font-weight:700;
    min-height:62px;
    cursor:pointer;
    background:#fff;
    transition:
      background .2s ease,
      color .2s ease,
      box-shadow .2s ease,
      transform .16s ease;
  }

  /* Selected choices get a quieter animated border than the main CTA.
     Slow sage / blue-grey tones make selection obvious without competing
     with the stronger purple-blue "Generate" glow. */
  .choice input:checked + span{
    --a: 0deg;
    color:#31594c;
    background:
      linear-gradient(#f4f8f5, #f4f8f5) padding-box,
      conic-gradient(
        from var(--a),
        #8fb6a6,
        #b9c8b5,
        #9eb8c1,
        #a7c3b5,
        #8fb6a6
      ) border-box;
    border:1.5px solid transparent;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.45) inset,
      0 0 10px rgba(111,151,137,.10);
    animation:rotateGlow 6s linear infinite;
  }

  .choice input:checked + span::after{
    content:"";
    position:absolute;
    z-index:-1;
    inset:-3px;
    border-radius:16px;
    background:conic-gradient(
      from var(--a),
      rgba(143,182,166,.02),
      rgba(158,184,193,.12),
      rgba(185,200,181,.07),
      rgba(167,195,181,.11),
      rgba(143,182,166,.02)
    );
    filter:blur(6px);
    opacity:.55;
    pointer-events:none;
    animation:rotateGlow 6s linear infinite;
  }

  .choice input:checked + span:active{
    transform:scale(.99);
  }
  .tiny{font-size:.86rem;color:var(--muted);font-weight:400;display:block;margin-top:3px}
  .row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
  }
  .note{
    border-left:4px solid var(--warn);
    padding-left:12px;
    color:#5f4a35;
    margin-top:10px;
  }
  .actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:18px;
  }
  button{
    appearance:none;
    border:0;
    border-radius:12px;
    padding:12px 16px;
    font:inherit;
    font-weight:800;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }

  /* Rotating glowing border, inspired by the reference button. */
  .primary{
    --a: 0deg;
    position:relative;
    isolation:isolate;
    color:#fff;
    background:
      linear-gradient(#173d31, #173d31) padding-box,
      conic-gradient(
        from var(--a),
        #8e69ff,
        #4dd8ff,
        #5f78ff,
        #d45cff,
        #ff7bc1,
        #8e69ff
      ) border-box;
    border:2px solid transparent;
    border-radius:14px;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.05) inset,
      0 0 18px rgba(111,98,255,.22),
      0 0 34px rgba(212,92,255,.12);
    animation:rotateGlow 3.5s linear infinite;
    transition:transform .16s ease, box-shadow .2s ease, filter .2s ease;
  }

  .primary::after{
    content:"";
    position:absolute;
    z-index:-1;
    inset:-7px;
    border-radius:18px;
    background:conic-gradient(
      from var(--a),
      rgba(142,105,255,.05),
      rgba(77,216,255,.32),
      rgba(95,120,255,.18),
      rgba(212,92,255,.32),
      rgba(255,123,193,.18),
      rgba(142,105,255,.05)
    );
    filter:blur(12px);
    opacity:.68;
    animation:rotateGlow 3.5s linear infinite;
    pointer-events:none;
  }

  .primary:hover{
    transform:translateY(-1px);
    box-shadow:
      0 0 0 1px rgba(255,255,255,.08) inset,
      0 0 22px rgba(111,98,255,.28),
      0 0 42px rgba(212,92,255,.18);
  }

  .primary:active{
    transform:translateY(0) scale(.985);
  }

  .primary:focus-visible{
    outline:3px solid rgba(36,92,70,.25);
    outline-offset:4px;
  }

  .secondary{background:#ece9e2;color:#222}
  .danger{background:#f1e4e1;color:#7a3028}

  @media (prefers-reduced-motion: reduce){
    .primary,
    .primary::after,
    .choice input:checked + span,
    .choice input:checked + span::after{
      animation:none;
    }
  }
  #summary{
    white-space:pre-wrap;
    background:#111;
    color:#f5f5f5;
    border-radius:14px;
    padding:16px;
    font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size:.9rem;
    min-height:120px;
  }
  footer{
    color:var(--muted);
    font-size:.86rem;
    text-align:center;
    margin-top:18px;
  }
  @media (max-width:600px){
    .choices,.row{grid-template-columns:1fr}
    section{padding:17px}
  }

  .header-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:16px;
  }
  .share-button{
    background:#ece9e2;
    color:#222;
    border:1px solid var(--line);
  }
  .share-button:hover{
    background:#e5e1d8;
  }

  .summary-box{
    margin-top:16px;
  }

  footer strong{
    color:var(--text);
  }