  :root{--accent:#0f766e;--accent-soft:#ecfdf5;--accent-dark:#0b5a54;--gold:#c2410c;--rose:#be123c;--violet:#7c3aed;--sky:#0369a1}
  body{background:
      radial-gradient(circle at 8% 0%, rgba(15,118,110,.10), transparent 42%),
      radial-gradient(circle at 95% 12%, rgba(194,65,12,.10), transparent 40%),
      linear-gradient(180deg,#ecfdf5 0%,#f8fafc 45%,#fff7ed 100%);
    background-attachment:fixed}
  .ds-wrap{max-width:900px;margin:0 auto;padding:0 22px 90px}
  .ds-card{background:linear-gradient(155deg,#ffffff 0%,#f5faf8 100%);border:1px solid var(--line);border-left:5px solid var(--accent);border-radius:var(--radius);box-shadow:0 10px 28px -14px rgba(15,118,110,.22),var(--shadow);padding:28px 26px;margin-bottom:22px;
    animation:tsCardIn .35s ease both}
  @keyframes tsCardIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
  .page-head{position:relative;overflow:hidden}
  .page-head::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% -10%, rgba(194,65,12,.18), transparent 55%),radial-gradient(circle at -5% 120%, rgba(15,118,110,.18), transparent 55%);pointer-events:none}
  .page-head .container{position:relative}
  .page-head h1{background:linear-gradient(120deg,var(--accent-dark),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
  .ds-card#stepVerify{border-left-color:#7c3aed;background:linear-gradient(155deg,#ffffff 0%,#faf5ff 100%)}
  .ds-card#stepRoleplay{border-left-color:#0369a1;background:linear-gradient(155deg,#ffffff 0%,#f0f9ff 100%)}
  .ts-mode-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
  @media (max-width:900px){.ts-mode-grid{grid-template-columns:1fr 1fr}}
  @media (max-width:640px){.ts-mode-grid{grid-template-columns:1fr}}
  .ts-mode-cell{display:flex;flex-direction:column}
  .ts-mode-btn{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;padding:20px 18px;border:1.5px solid var(--line);border-top:4px solid var(--line);border-radius:14px;background:#fff;cursor:pointer;font-family:var(--font-body);
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;position:relative;width:100%}
  .ts-mode-btn:hover{transform:translateY(-3px);box-shadow:0 14px 26px -14px rgba(15,23,42,.28)}
  .ts-mode-btn:active{transform:translateY(-1px)}
  .ts-mode-btn strong{font-family:var(--font-head);font-size:1.05rem;color:var(--ink)}
  .ts-mode-btn span{font-size:.85rem;color:var(--muted)}
  .ts-icon{font-size:1.6rem;line-height:1;margin-bottom:2px;display:inline-block;filter:drop-shadow(0 2px 3px rgba(0,0,0,.12))}
  .ts-cell-blueprint .ts-mode-btn{border-top-color:var(--accent)}
  .ts-cell-blueprint .ts-mode-btn:hover{background:var(--accent-soft);border-color:var(--accent)}
  .ts-cell-generate .ts-mode-btn{border-top-color:var(--gold)}
  .ts-cell-generate .ts-mode-btn:hover{background:#fff7ed;border-color:var(--gold)}
  .ts-cell-assignment .ts-mode-btn{border-top-color:var(--violet)}
  .ts-cell-assignment .ts-mode-btn:hover{background:#faf5ff;border-color:var(--violet)}
  .ts-howto{margin-top:10px}
  .ts-howto summary{font-size:.8rem;color:var(--accent-dark);cursor:pointer;font-weight:700;list-style:none;padding:4px 0;transition:color .15s ease}
  .ts-howto summary::-webkit-details-marker{display:none}
  .ts-howto summary::marker{content:""}
  .ts-howto summary::before{content:"▸ ";display:inline-block;transition:transform .15s ease}
  .ts-howto[open] summary::before{transform:rotate(90deg)}
  .ts-howto summary:hover{color:var(--gold)}
  .ts-howto[open] summary{margin-bottom:8px}
  .ts-howto ul{margin:8px 0 8px 18px;font-size:.8rem;color:var(--ink);line-height:1.5}
  .ts-howto li{margin-bottom:6px}
  .ts-example{font-size:.78rem;color:var(--accent-dark);font-style:italic;background:linear-gradient(120deg,var(--accent-soft),#fff7ed);border-radius:8px;padding:9px 12px;border:1px solid var(--line);margin-top:6px}
  .ts-roleplay-note{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:10px;background:#fbfbfd}
  .ts-roleplay-note h5{font-family:var(--font-head);font-size:.9rem;margin-bottom:5px;color:#0369a1}
  .ds-card#stepDraft{border-left-color:var(--gold);background:linear-gradient(155deg,#ffffff 0%,#fffaf5 100%)}
  .ds-card#stepCheck{border-left-color:var(--rose);background:linear-gradient(155deg,#ffffff 0%,#fff5f7 100%)}
  .page-head{background:linear-gradient(120deg,var(--accent-soft),#ffedd5)}
  .ds-step-label{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;margin-bottom:16px;display:inline-block;background:linear-gradient(120deg,var(--accent),var(--accent-dark));padding:7px 16px;border-radius:999px;box-shadow:0 4px 12px -4px rgba(15,118,110,.5)}
  #stepGenOptions .ds-step-label{background:linear-gradient(120deg,var(--gold),#9a3412);box-shadow:0 4px 12px -4px rgba(194,65,12,.5)}
  #stepAnchor .ds-step-label{background:linear-gradient(120deg,var(--violet),#5b21b6);box-shadow:0 4px 12px -4px rgba(124,58,237,.5)}
  #stepVerify .ds-step-label{background:linear-gradient(120deg,var(--violet),#5b21b6);box-shadow:0 4px 12px -4px rgba(124,58,237,.5)}
  #stepRoleplay .ds-step-label{background:linear-gradient(120deg,var(--sky),#075985);box-shadow:0 4px 12px -4px rgba(3,105,161,.5)}
  #stepCheck .ds-step-label{background:linear-gradient(120deg,var(--rose),#9f1239);box-shadow:0 4px 12px -4px rgba(190,18,60,.5)}
  #stepHistory .ds-step-label{background:linear-gradient(120deg,#475569,#1e293b);box-shadow:0 4px 12px -4px rgba(30,41,59,.4)}
  textarea, input[type=text]{width:100%;font-family:var(--font-body);font-size:.95rem;padding:11px 13px;border:1px solid var(--line);border-radius:10px;background:#fbfbfd;color:var(--ink)}
  textarea{resize:vertical;min-height:80px}
  label.field-label{display:block;font-size:.8rem;font-weight:700;color:var(--ink);margin-bottom:7px}
  .ds-note{font-size:.82rem;color:var(--muted);font-style:italic}
  .ds-btn{font-family:var(--font-body);font-weight:700;font-size:.9rem;background:linear-gradient(120deg,var(--accent),var(--accent-dark));color:#fff;border:none;border-radius:10px;padding:12px 22px;cursor:pointer;
    box-shadow:0 6px 16px -8px rgba(15,118,110,.55);transition:transform .15s ease, box-shadow .15s ease}
  .ds-btn:hover{transform:translateY(-1px);box-shadow:0 10px 20px -8px rgba(15,118,110,.6)}
  .ds-btn:active{transform:translateY(0)}
  .ds-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
  .ds-btn.ghost{background:transparent;color:var(--accent-dark);border:1.5px solid var(--accent-dark);box-shadow:none}
  .ds-btn.ghost:hover{background:var(--accent-soft);box-shadow:none}
  .ds-btn.sm{padding:7px 13px;font-size:.8rem;border-radius:8px}
  .ds-field-block{margin-bottom:18px}
  .ds-panel{border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-top:14px;background:linear-gradient(155deg,#fbfbfd,#f5f5fa);transition:box-shadow .15s ease}
  .ds-panel:hover{box-shadow:0 6px 18px -12px rgba(15,23,42,.25)}
  .ds-panel h5{font-family:var(--font-head);font-size:.95rem;margin-bottom:8px;color:var(--accent-dark)}
  .ds-flag-note{background:#fff1f2;border:1px solid #fda4af;color:#9f1239;border-radius:8px;padding:10px 14px;font-size:.85rem;margin-top:8px}
  .ds-good-note{background:#f0fdf4;border:1px solid #86efac;color:#166534;border-radius:8px;padding:10px 14px;font-size:.85rem;margin-top:8px}
  .ds-check-row{display:flex;align-items:flex-start;gap:10px;margin-top:8px;font-size:.88rem}
  .ds-check-row input{margin-top:3px}
  .ds-history-row{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:8px 0;font-size:.85rem}
  input[type=file]{font-size:.82rem;color:var(--muted)}

  .ts-progress-wrap{margin-bottom:22px}
  .ts-progress-track{height:10px;border-radius:6px;background:#e2e8f0;overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,.12)}
  .ts-progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--gold));background-size:200% 100%;border-radius:6px;transition:width .4s ease;animation:tsShimmer 2.2s linear infinite}
  @keyframes tsShimmer{0%{background-position:0% 0}100%{background-position:200% 0}}
  .ts-progress-label{display:block;margin-top:8px;font-size:.78rem;color:var(--muted);font-weight:600}
  .ts-q{margin-bottom:6px;animation:tsCardIn .25s ease both}
  .ts-radio-group{display:flex;flex-direction:column;gap:8px}
  .ts-radio{display:flex;align-items:flex-start;gap:10px;font-size:.9rem;cursor:pointer;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;background:#fff;transition:border-color .15s ease, background .15s ease}
  .ts-radio:hover{border-color:var(--accent);background:var(--accent-soft)}
  .ts-radio:has(input:checked){border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent) inset}
  .ts-radio input{margin-top:3px}
  .ts-source-card{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:10px;background:#fbfbfd}
  .ts-source-card .meta{font-size:.78rem;color:var(--muted);margin-top:6px}
  .ts-source-card a{color:#7c3aed;font-weight:600}
  .ts-source-card label{display:flex;align-items:flex-start;gap:9px;font-size:.9rem;cursor:pointer}

  #keyOverlay{position:fixed;inset:0;background:rgba(15,23,42,.55);display:flex;align-items:center;justify-content:center;z-index:50;padding:20px}
  #keyOverlay[hidden]{display:none}
  #keyOverlay .box{background:#fff;border-radius:14px;padding:26px 24px;max-width:420px;width:100%}
  #keyOverlay .box h3{font-family:var(--font-head);margin-bottom:8px}
  #keyOverlay .box p{font-size:.85rem;color:var(--muted);margin-bottom:14px}
  #keyErr{color:var(--rose);font-size:.8rem;margin-top:8px;min-height:1em}
