*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#ffffff;
  --bg-elevated:#fafafa;
  --bg-muted:#f5f5f4;
  --bg-hover:#f0efee;
  --fg:#1a1a1a;
  --fg-muted:#6b6b6b;
  --fg-dim:#9a9a9a;
  --border:#e5e5e4;
  --border-hover:#d0d0cf;
  --accent:#8b7355;
  --accent-dim:rgba(139,115,85,.06);
  --radius:.5rem;
  --font:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --text-xs:.75rem;
  --text-sm:.8125rem;
  --text-base:.875rem;
  --text-lg:1.25rem;
  --text-xl:1.5rem;
}

html{font-family:var(--font);background:var(--bg);color:var(--fg);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
body{min-height:100vh}
a{color:var(--fg-muted);text-decoration:none;transition:color .2s}
a:hover{color:var(--fg)}
code{font-family:var(--font);font-size:inherit;background:var(--bg-muted);padding:.15em .4em;border-radius:4px;border:1px solid var(--border);color:var(--fg-muted)}
p{font-size:var(--text-base);line-height:1.7;color:var(--fg-muted)}

/* layout */
.container{max-width:580px;margin:0 auto;padding:3rem 1.5rem}

/* nav */
nav{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;max-width:580px;margin:0 auto}
nav .logo{font-size:var(--text-base);font-weight:700;display:flex;align-items:center;gap:.5rem;color:var(--fg);text-decoration:none;letter-spacing:-.02em}
nav .logo .sparkle{font-size:1rem;color:var(--accent)}
nav .nav-links{display:flex;align-items:center;gap:1.25rem}
nav a.nav-link{color:var(--fg-dim);font-size:var(--text-sm);transition:color .2s}
nav a.nav-link:hover{color:var(--fg)}

.btn-nav{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.5rem 1.1rem;
  background:var(--fg);
  color:var(--bg);
  border:1px solid var(--fg);
  border-radius:8px;
  font-size:var(--text-sm);font-weight:600;
  cursor:pointer;font-family:var(--font);text-decoration:none;
  transition:all .25s;
  box-shadow:0 1px 2px rgba(0,0,0,.08);
}
.btn-nav:hover{
  background:#333;
  border-color:#333;
  color:var(--bg);
  box-shadow:0 2px 8px rgba(0,0,0,.12);
  transform:translateY(-1px);
}

/* hero */
.hero{padding:4rem 0 3rem}
.hero h1{font-size:var(--text-xl);font-weight:700;letter-spacing:-.03em;line-height:1.35;margin-bottom:1rem;color:var(--fg)}
.hero p{color:var(--fg-muted);font-size:var(--text-base);max-width:480px;line-height:1.7}

/* section labels */
.section-label{font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--fg-dim);margin-bottom:1.25rem}

/* steps */
.steps{display:flex;flex-direction:column;gap:1.5rem;margin:0 0 3.5rem}
.step{display:flex;gap:.75rem;align-items:baseline}
.step-num{color:var(--fg-dim);font-size:var(--text-base);flex-shrink:0}
.step-title{font-weight:600;font-size:var(--text-base);color:var(--fg)}
.step-desc{color:var(--fg-muted);font-size:var(--text-base)}

/* generator */
.generator{margin:0 0 3.5rem}
.generator-box{
  border:1px solid var(--border);
  border-radius:12px;
  padding:1.75rem;
  display:flex;flex-direction:column;gap:1.5rem;
  background:var(--bg);
  box-shadow:0 1px 3px rgba(0,0,0,.04),0 0 0 1px rgba(0,0,0,.02);
}
label{font-size:var(--text-xs);font-weight:600;color:var(--fg-dim);display:block;margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.08em}
textarea,input[type="text"]{
  width:100%;
  background:var(--bg-muted);
  border:1px solid var(--border);
  border-radius:8px;
  padding:.75rem 1rem;
  color:var(--fg);
  font-family:var(--font);font-size:var(--text-base);
  resize:vertical;
  transition:all .2s;
}
textarea:focus,input[type="text"]:focus{outline:none;border-color:var(--border-hover);box-shadow:0 0 0 3px rgba(139,115,85,.08)}
textarea{min-height:120px}

.output-block{
  background:var(--bg-muted);
  border:1px solid var(--border);
  border-radius:8px;
  padding:.75rem 1rem;
  font-size:var(--text-sm);
  color:var(--fg-muted);
  word-break:break-all;
  position:relative;
  min-height:44px;
  display:flex;align-items:center;
}
.output-block code{flex:1;overflow-x:auto;background:none;padding:0;border:none;font-size:var(--text-sm);color:var(--fg-muted)}
.output-block .copy-btn{position:absolute;top:8px;right:8px}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.6rem 1.2rem;
  border-radius:8px;
  font-size:var(--text-sm);font-weight:600;
  border:none;cursor:pointer;
  transition:all .25s;
  font-family:var(--font);
}
.btn-primary{
  background:var(--fg);
  color:var(--bg);
  border:1px solid var(--fg);
  box-shadow:0 1px 2px rgba(0,0,0,.08);
}
.btn-primary:hover{
  background:#333;
  border-color:#333;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
  transform:translateY(-1px);
}
.btn-secondary{
  background:var(--bg);
  color:var(--fg-muted);
  border:1px solid var(--border);
}
.btn-secondary:hover{border-color:var(--border-hover);color:var(--fg)}
.btn-ghost{
  background:var(--bg-muted);
  color:var(--fg-dim);
  padding:.4rem .7rem;
  font-size:var(--text-xs);
  border-radius:6px;
  border:1px solid var(--border);
  transition:all .2s;
}
.btn-ghost:hover{color:var(--fg-muted);border-color:var(--border-hover);background:var(--bg-hover)}

/* tool picker */
.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:.625rem;margin:1rem 0}
.tool-btn{
  display:flex;align-items:center;gap:.75rem;
  padding:.875rem 1rem;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:10px;
  cursor:pointer;
  transition:all .25s;
  text-align:left;
  font-family:var(--font);
  position:relative;
  overflow:hidden;
}
.tool-btn::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(0,0,0,.01),transparent);
  opacity:0;
  transition:opacity .25s;
}
.tool-btn:hover{
  border-color:var(--border-hover);
  background:var(--bg-muted);
  transform:translateY(-1px);
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.tool-btn:hover::before{opacity:1}
.tool-btn.selected{
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent),0 2px 8px rgba(0,0,0,.06);
}
.tool-btn .tool-icon{font-size:1.25rem;flex-shrink:0;opacity:.5}
.tool-btn .tool-name{font-weight:600;font-size:var(--text-sm);color:var(--fg)}
.tool-btn .tool-desc{color:var(--fg-dim);font-size:var(--text-xs)}

/* prompt preview */
.prompt-preview{background:var(--bg-muted);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;margin:1rem 0;max-height:260px;overflow-y:auto}
.prompt-preview pre{font-family:var(--font);font-size:var(--text-sm);white-space:pre-wrap;word-break:break-word;color:var(--fg-muted)}

/* toast */
.toast{
  position:fixed;bottom:2rem;left:50%;
  transform:translateX(-50%) translateY(80px);
  background:var(--fg);color:var(--bg);
  padding:.55rem 1.5rem;
  border-radius:8px;
  font-size:var(--text-sm);font-weight:600;
  opacity:0;
  transition:all .3s cubic-bezier(.16,1,.3,1);
  pointer-events:none;z-index:100;
  box-shadow:0 4px 16px rgba(0,0,0,.15);
}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}

/* status */
.status{display:flex;align-items:center;gap:.4rem;padding:.4rem .6rem;border-radius:6px;font-size:var(--text-sm)}
.status.loading{color:var(--fg-dim)}
.status.error{color:#ef4444;background:rgba(239,68,68,.06)}
.status.success{color:#22c55e;background:rgba(34,197,94,.06)}

/* footer */
footer{padding:2.5rem 0;text-align:center;color:var(--fg-dim);font-size:var(--text-xs);border-top:1px solid var(--border)}
footer a{color:var(--fg-dim)}
footer a:hover{color:var(--fg-muted)}

/* tabs */
.tabs{display:flex;gap:0;border:1px solid var(--border);border-radius:8px;overflow:hidden;margin-bottom:1.5rem;background:var(--bg-muted)}
.tab{
  flex:1;padding:.65rem .75rem;
  text-align:center;
  font-size:var(--text-sm);font-weight:600;
  cursor:pointer;
  background:transparent;
  color:var(--fg-dim);
  border:none;
  transition:all .2s;
  font-family:var(--font);
}
.tab.active{background:var(--bg);color:var(--fg)}
.tab:hover:not(.active){background:var(--bg-hover);color:var(--fg-muted)}
.tab:not(:last-child){border-right:1px solid var(--border)}

/* badge preview */
.badge-preview{display:flex;align-items:center;justify-content:center;padding:1.5rem;background:var(--bg-muted);border-radius:8px;border:1px solid var(--border)}

/* code block */
.code-block{background:var(--bg-muted);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;margin:.75rem 0}
.code-block pre{font-size:var(--text-sm);white-space:pre-wrap;word-break:break-word;color:var(--fg-muted)}

/* faq */
.faq{margin:0 0 3rem}
.faq-item{padding:.875rem 0;border-bottom:1px solid var(--border)}
.faq-item:first-child{border-top:1px solid var(--border)}
.faq-q{font-weight:600;font-size:var(--text-base);margin-bottom:.4rem;color:var(--fg)}
.faq-a{color:var(--fg-muted);font-size:var(--text-base);display:flex;gap:.5rem}
.faq-a .tree{color:var(--fg-dim);flex-shrink:0}

/* details/summary */
summary{cursor:pointer;color:var(--fg-dim);font-size:var(--text-sm);font-weight:500;transition:color .2s}
summary:hover{color:var(--fg-muted)}

/* responsive */
@media(max-width:600px){
  .hero h1{font-size:1.15rem}
  .tool-grid{grid-template-columns:1fr}
  .container{padding:2rem 1rem}
  nav{padding:.75rem 1rem}
}