/* Mobile first. The drawing is the hero at every size. */
:root{
  --ink:#1f2328; --ink2:#5b636c; --thin:#8b939c;
  --bg:#fbf9f4; --card:#fff; --line:#e3ded2;
  --accent:#1d4e4a; --accent2:#2c6f69; --warn:#9a3412; --ok:#1d6b46;
  --r:14px; --shadow:0 1px 2px rgba(20,24,28,.05),0 8px 24px rgba(20,24,28,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  -webkit-text-size-adjust:100%;
}
a{color:var(--accent2)}

.top{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px; border-bottom:1px solid var(--line);
  background:rgba(251,249,244,.92); backdrop-filter:blur(8px);
  position:sticky; top:0; z-index:40;
}
.brand{font-weight:750; letter-spacing:-.02em; color:var(--ink); text-decoration:none}
.top nav{display:flex; align-items:center; gap:14px; font-size:14px}
.top nav a{text-decoration:none; color:var(--ink2)}
.cta-sm{
  background:var(--accent); color:#fff!important; padding:8px 13px;
  border-radius:999px; font-weight:650;
}

/* ---------------------------------------------------------------- chat */
.chat-wrap{display:flex; flex-direction:column; min-height:calc(100dvh - 58px)}
.pane-chat{display:flex; flex-direction:column; flex:1; padding:14px 14px 0; min-width:0}
.thread{flex:1; display:flex; flex-direction:column; gap:12px; padding-bottom:8px}
.msg{max-width:min(660px,100%); border-radius:var(--r); padding:14px 16px; animation:in .22s ease}
@keyframes in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.msg.bot{background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow)}
.msg.me{background:var(--accent); color:#fff; align-self:flex-end; border-radius:var(--r) var(--r) 4px var(--r)}
.msg p{margin:0 0 8px} .msg p:last-child{margin:0}
.msg .big{font-size:19px; font-weight:700; letter-spacing:-.02em; line-height:1.3}
.msg .sub{color:var(--ink2); font-size:15px}
.thin{color:var(--thin); font-size:13.5px}
.intro .big{font-size:22px}

.why{
  margin-top:10px; font-size:13px; color:var(--accent2); background:none;
  border:0; padding:0; cursor:pointer; text-decoration:underline; text-underline-offset:3px;
}
.why-body{
  margin-top:9px; padding:11px 13px; background:#f3f6f4; border-left:3px solid var(--accent2);
  border-radius:0 8px 8px 0; font-size:14px; color:#38433f;
}

/* composer */
.composer{position:sticky; bottom:0; background:linear-gradient(transparent,var(--bg) 22%); padding:10px 0 14px}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px}
.chip{
  background:var(--card); border:1.5px solid var(--line); border-radius:999px;
  padding:10px 15px; font-size:15px; cursor:pointer; min-height:44px; color:var(--ink);
}
.chip:hover{border-color:var(--accent2)}
.chip[aria-pressed=true]{background:var(--accent); color:#fff; border-color:var(--accent)}
.row{display:flex; gap:8px}
input[type=text],input[type=number]{
  flex:1; min-width:0; padding:13px 15px; font-size:16px; border:1.5px solid var(--line);
  border-radius:12px; background:var(--card); color:var(--ink); font-family:inherit;
}
input:focus{outline:2px solid var(--accent2); outline-offset:1px}
.btn{
  background:var(--accent); color:#fff; border:0; border-radius:12px; padding:13px 20px;
  font-size:16px; font-weight:650; cursor:pointer; min-height:48px; font-family:inherit;
}
.btn.ghost{background:transparent; color:var(--ink2); border:1.5px solid var(--line)}
.btn:disabled{opacity:.45; cursor:default}
.stepper{display:flex; align-items:center; gap:10px; background:var(--card);
  border:1.5px solid var(--line); border-radius:12px; padding:8px 10px; font-size:15px}
.stepper b{min-width:92px}
.stepper button{width:40px;height:40px;border-radius:9px;border:1.5px solid var(--line);
  background:var(--bg); font-size:20px; cursor:pointer; color:var(--ink)}
.stepper span{min-width:26px; text-align:center; font-variant-numeric:tabular-nums}
.slider{width:100%; margin:6px 0 2px}
.slider-val{font-size:15px; color:var(--ink2)}
.uploadlbl{display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  border:1.5px dashed var(--line); border-radius:12px; padding:12px 15px; font-size:15px;
  color:var(--ink2); background:var(--card)}
.uploadlbl input{display:none}

.progress{display:flex; align-items:center; gap:10px; padding:4px 0 12px; font-size:12.5px; color:var(--thin)}
.progress>div:first-child{flex:1; height:5px; background:var(--line); border-radius:99px; overflow:hidden}
#bar::after{content:""; display:block; height:100%; width:var(--w,0%); background:var(--accent);
  border-radius:99px; transition:width .35s ease}

/* drawing pane */
.pane-draw{padding:0 14px 20px}
.sheet{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); padding:10px; position:relative}
.sheet svg{width:100%; height:auto; display:block; aspect-ratio:1/1}
.hint{margin:4px 0 2px; text-align:center; font-size:13px; color:var(--thin)}

/* generation */
.steps{list-style:none; margin:10px 0 0; padding:0; font-size:14.5px}
.steps li{display:flex; gap:10px; padding:7px 0; color:var(--thin); align-items:baseline}
.steps li .t{flex:1}
.steps li .f{color:var(--ink2); font-variant-numeric:tabular-nums; font-size:13.5px; text-align:right}
.steps li.on{color:var(--ink)} .steps li.done{color:var(--ink)}
.steps li.done::before{content:"✓"; color:var(--ok); font-weight:700}
.steps li.on::before{content:"•"; color:var(--accent2)}
.steps li.todo::before{content:"○"; color:var(--line)}

.refuse{border-left:3px solid var(--warn); background:#fdf6f3}
.refuse .big{color:var(--warn)}

/* result */
.result{max-width:1100px; margin:0 auto; padding:18px 14px 40px}
.result h1{font-size:26px; letter-spacing:-.025em; margin:.2em 0 .1em}
.checkline{display:inline-flex; gap:8px; align-items:center; background:#eef6f1; color:var(--ok);
  border:1px solid #cfe6da; border-radius:999px; padding:6px 13px; font-size:14px; font-weight:650}
.figs{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin:16px 0}
.fig{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px}
.fig b{display:block; font-size:19px; letter-spacing:-.02em}
.fig span{font-size:12.5px; color:var(--thin)}
.shots{display:grid; gap:14px; margin:16px 0}
.shots img{width:100%; border:1px solid var(--line); border-radius:12px; background:#fff; display:block}
.why-card{background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:14px 16px; margin:10px 0}
.why-card b{display:block; margin-bottom:5px; letter-spacing:-.01em}
.why-card p{margin:0; color:var(--ink2); font-size:15px}
.paywall{background:var(--card); border:2px solid var(--accent); border-radius:var(--r);
  padding:18px; margin:20px 0}
.paywall .big{font-size:20px; font-weight:750; margin:0 0 6px}
.notice{background:#fff8ec; border:1px solid #f0dcb8; border-radius:12px; padding:13px 15px;
  font-size:14.5px; color:#6b4f1d; margin:12px 0}

/* guide */
.wrap{max-width:760px; margin:0 auto; padding:22px 16px 48px}
.wrap h1{font-size:30px; letter-spacing:-.03em; line-height:1.15}
.wrap h2{font-size:22px; letter-spacing:-.02em; margin-top:1.7em}
.wrap h3{font-size:18px; margin-top:1.4em}
.wrap p,.wrap li{font-size:17px; line-height:1.65}
.wrap table{width:100%; border-collapse:collapse; margin:1em 0; font-size:15px}
.wrap th,.wrap td{border:1px solid var(--line); padding:8px 10px; text-align:left}
.wrap th{background:#f4f1ea}
.wrap blockquote{border-left:3px solid var(--accent2); margin:1em 0; padding:.4em 0 .4em 14px;
  color:var(--ink2)}
.cards{display:grid; gap:12px; margin:18px 0}
.card{display:block; background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:15px 17px; text-decoration:none; color:inherit}
.card:hover{border-color:var(--accent2)}
.card b{display:block; font-size:17px; letter-spacing:-.015em; margin-bottom:3px}
.card span{color:var(--ink2); font-size:14.5px}
.srcs{font-size:13.5px; color:var(--thin); border-top:1px solid var(--line); margin-top:28px; padding-top:14px}
.endcta{background:var(--accent); color:#fff; border-radius:var(--r); padding:20px; margin:26px 0 0}
.endcta p{margin:0 0 12px; font-size:17px}
.endcta a{background:#fff; color:var(--accent)!important; padding:12px 20px; border-radius:999px;
  font-weight:700; text-decoration:none; display:inline-block}

.foot{border-top:1px solid var(--line); padding:22px 16px 34px; color:var(--ink2); font-size:14px}
.foot p{max-width:760px; margin:0 auto 10px}

@media (min-width:900px){
  .chat-wrap{flex-direction:row; gap:18px; max-width:1240px; margin:0 auto; padding:0 16px; height:calc(100dvh - 58px)}
  .pane-chat{flex:1 1 52%; padding:18px 0 0; overflow:hidden}
  .thread{overflow-y:auto; padding-right:6px}
  .pane-draw{flex:1 1 48%; padding:18px 0; position:sticky; top:58px; align-self:start}
  .sheet svg{aspect-ratio:auto; height:min(66vh,620px)}
  .shots{grid-template-columns:1fr 1fr}
  .result h1{font-size:32px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}