/* Teardown — "Studio Dark" 创作者工作室风（第 11 套设计，暗底+电光紫+荧光绿） */
:root{
  --bg:#0b0b12; --panel:#14141f; --panel2:#1b1b2a; --line:#2a2a3d;
  --ink:#f4f3fb; --sub:#a9a7c0; --violet:#8b5cf6; --lime:#c6f24e; --pink:#f472b6;
}
*{ box-sizing:border-box; }
body{ margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif; }
.wrap{ max-width:820px; margin:0 auto; padding:0 22px; }
a{ color:var(--lime); }

header.site{ border-bottom:1px solid var(--line); padding:16px 0; position:sticky; top:0; background:rgba(11,11,18,.85); backdrop-filter:blur(8px); z-index:10; }
header.site .wrap{ display:flex; align-items:center; justify-content:space-between; }
.logo{ font-weight:850; font-size:20px; letter-spacing:-.03em; text-decoration:none; color:var(--ink); }
.logo span{ color:var(--violet); }
nav a{ color:var(--sub); text-decoration:none; margin-left:18px; font-size:14px; font-weight:600; }
nav a:hover{ color:var(--lime); }

.hero{ padding:64px 0 20px; text-align:center; }
.tag{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--violet); border:1px solid var(--line); border-radius:20px; padding:5px 14px; margin-bottom:22px; }
h1{ font-size:clamp(32px,6vw,56px); line-height:1.05; letter-spacing:-.035em; font-weight:850; margin:0 0 18px; }
h1 em{ font-style:normal; color:var(--lime); }
.lede{ color:var(--sub); font-size:18px; max-width:600px; margin:0 auto; }

.tool{ padding:26px 0; }
.card{ background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:20px; }
label{ display:block; font-weight:700; font-size:14px; margin-bottom:10px; }
.hint{ color:var(--sub); font-weight:400; }
textarea{ width:100%; min-height:150px; resize:vertical; background:var(--panel2); border:1px solid var(--line);
  border-radius:12px; color:var(--ink); padding:14px; font:15px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace; }
textarea:focus{ outline:none; border-color:var(--violet); }
.row{ display:flex; gap:12px; align-items:center; margin-top:14px; flex-wrap:wrap; }
.btn{ background:var(--violet); color:#fff; border:0; font-weight:800; font-size:15px; padding:13px 26px;
  border-radius:11px; cursor:pointer; transition:transform .06s, background .15s; white-space:nowrap; }
.btn:hover{ background:#7c3aed; }
.btn:active{ transform:translateY(1px); }
.btn:disabled{ opacity:.55; cursor:default; }
.status{ color:var(--sub); font-size:14px; }

.out{ margin-top:18px; background:var(--panel); border:1px solid var(--line); border-left:4px solid var(--lime);
  border-radius:14px; padding:8px 22px; }
.out h3{ color:var(--lime); font-size:15px; margin:18px 0 6px; letter-spacing:-.01em; }
.out p{ margin:8px 0; color:#dcdbea; font-size:15px; }
.out strong{ color:var(--ink); }

.api{ padding:40px 0 20px; border-top:1px solid var(--line); margin-top:30px; }
h2{ font-size:26px; font-weight:800; letter-spacing:-.02em; margin:0 0 12px; }
.api p{ color:var(--sub); max-width:640px; }
.api p strong{ color:var(--lime); }
.waitlist{ margin:20px 0; }
.waitlist input{ background:var(--panel2); border:1px solid var(--line); border-radius:11px; color:var(--ink);
  padding:13px 14px; font-size:15px; flex:1; min-width:180px; }
.waitlist input:focus{ outline:none; border-color:var(--violet); }
.waitlist .note{ width:100%; margin-top:12px; }
.fine{ font-size:13px; color:var(--sub); border-top:1px dashed var(--line); padding-top:16px; }

footer.site{ border-top:1px solid var(--line); margin-top:40px; padding:24px 0 40px; color:var(--sub); font-size:13px; }
footer.site a{ color:var(--sub); }
@media (max-width:560px){ .hero{ padding:44px 0 12px; } }