:root{
  --paper:#f4efe3; --paper-2:#ece5d2; --ink:#26221c; --muted:#6f675a;
  --line:#26221c; --danger:#a3402e; --ok:#4e6b3f;
  --shadow:4px 4px 0 var(--ink);
  --radius:10px;
}
*{box-sizing:border-box; margin:0; padding:0}
html, body{height:100%}
body{
  background:var(--paper); color:var(--ink);
  font-family:"Work Sans", system-ui, sans-serif;
  font-size:14px; line-height:1.45;
  padding:16px clamp(14px,2.5vw,32px) 12px;
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column;
  height:100vh; height:100dvh;
  overflow:hidden;
}
.serif{font-family:"Fraunces", Georgia, serif}

/* ---------- header ---------- */
header{
  flex:none;
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
  border-bottom:3px solid var(--ink); padding-bottom:10px; margin-bottom:14px;
  flex-wrap:wrap;
}
.wordmark{font-family:"Fraunces",Georgia,serif; font-weight:600; font-size:clamp(22px,2.6vw,30px); letter-spacing:-.01em; line-height:1.05}
.wordmark .amp{font-style:italic; font-weight:400}
.tagline{color:var(--muted); margin-top:3px; font-size:12.5px; max-width:60ch}
.stamp{
  border:2px solid var(--ink); border-radius:999px; padding:4px 12px;
  font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  transform:rotate(2deg); background:var(--paper-2); white-space:nowrap;
}

/* ---------- layout ---------- */
.workspace{
  flex:1; min-height:0;
  display:grid; grid-template-columns:minmax(320px,430px) 1fr; gap:20px;
  align-items:stretch;
}
@media (max-width:960px){
  body{height:auto; overflow:auto}
  .workspace{grid-template-columns:1fr}
}

.panel{
  background:var(--paper); border:2px solid var(--ink); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:16px 18px;
  display:flex; flex-direction:column; min-height:0;
}
#configPanel{overflow-y:auto}
.steplabel{
  display:flex; align-items:center; gap:8px; margin-bottom:8px;
}
.steplabel .n{
  font-family:"Fraunces",Georgia,serif; font-style:italic; font-size:15px;
  border:1.5px solid var(--ink); border-radius:999px; width:24px; height:24px;
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  background:var(--paper-2);
}
.steplabel h2{font-size:11.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase}
.step{margin-bottom:16px}
.step:last-of-type{margin-bottom:14px}

/* ---------- dropzone ---------- */
.dropzone{
  border:2px dashed var(--ink); border-radius:var(--radius);
  padding:14px 12px; text-align:center; cursor:pointer;
  transition:background .15s, transform .15s;
  background:var(--paper-2);
}
.dropzone:hover, .dropzone:focus-visible{background:#e4dcc6; outline:none}
.dropzone.dragover{background:#e9dfc2; transform:scale(1.01)}
.dropzone .big{font-family:"Fraunces",Georgia,serif; font-size:15px; margin-bottom:2px}
.dropzone .hint{color:var(--muted); font-size:11.5px}
.dropzone.error{border-color:var(--danger); background:#f3e0da}
.drop-error{color:var(--danger); font-size:12px; margin-top:6px; display:none}
.privacy-inline{color:var(--muted); font-size:10.5px; margin-top:7px}

.thumbrow{display:flex; align-items:center; gap:12px}
.thumb{
  width:56px; height:56px; object-fit:cover; border:2px solid var(--ink);
  border-radius:8px; background:var(--paper-2); flex:none;
}
.thumbmeta{flex:1; min-width:0}
.thumbmeta .fname{font-weight:600; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.thumbmeta .fsub{color:var(--muted); font-size:10.5px; margin-bottom:2px}
.linkbtn{
  background:none; border:none; color:var(--ink); font:inherit; font-size:12px;
  text-decoration:underline; text-underline-offset:3px; cursor:pointer; padding:1px 0;
}
.linkbtn:hover{color:var(--danger)}

.style-note{
  color:var(--muted); font-family:"Fraunces",Georgia,serif; font-style:italic;
  font-size:12px; line-height:1.45; margin-top:7px;
}
.craft-seg{display:grid; grid-template-columns:repeat(3,1fr); border:2px solid var(--ink); border-radius:var(--radius); overflow:hidden}
.craft-seg button{
  font:inherit; font-weight:600; font-size:12px; padding:10px 4px; cursor:pointer;
  background:var(--paper); border:none; border-right:2px solid var(--ink); color:var(--ink);
}
.craft-seg button:last-child{border-right:none}
.craft-seg button[aria-pressed="true"]{background:var(--ink); color:var(--paper)}
.craft-seg button:focus-visible{outline:2px solid var(--ink); outline-offset:-4px}

/* ---------- create button ---------- */
.create{
  width:100%; font:inherit; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  font-size:13.5px; padding:12px; background:var(--ink); color:var(--paper);
  border:2px solid var(--ink); border-radius:var(--radius); cursor:pointer;
  box-shadow:var(--shadow); transition:transform .12s, box-shadow .12s;
}
.create:hover:not(:disabled){transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink)}
.create:active:not(:disabled){transform:translate(0,0); box-shadow:2px 2px 0 var(--ink)}
.create:disabled{opacity:.35; cursor:not-allowed; box-shadow:none}

/* ---------- preview ---------- */
.preview-head{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:8px; flex-wrap:wrap; flex:none}
.status{font-family:"Fraunces",Georgia,serif; font-style:italic; font-size:15px}
.eta{color:var(--muted); font-size:11px}
.progress{height:8px; border:1.5px solid var(--ink); border-radius:999px; overflow:hidden; background:var(--paper-2); margin-bottom:8px; display:none; flex:none}
.progress .bar{height:100%; width:0%; background:var(--ink); transition:width .25s}
.soothe{color:var(--muted); font-size:11.5px; display:none; margin:-4px 0 6px; flex:none}
.giveup{display:none; margin:-2px 0 6px; flex:none}
.giveup .linkbtn{color:var(--danger)}

.canvasframe{
  flex:1; min-height:0; position:relative;
  border:2px solid var(--ink); border-radius:var(--radius);
  background:var(--paper-2); box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.poster-img{
  display:block; max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain;
}
.empty{
  position:absolute; inset:0; display:flex; flex-direction:column; gap:6px; align-items:center; justify-content:center;
  color:var(--muted); text-align:center; padding:20px;
}
.empty .big{font-family:"Fraunces",Georgia,serif; font-style:italic; font-size:18px; color:var(--ink)}
.empty .sub{font-size:12.5px; max-width:34ch}
.demo-link{margin-top:4px}

.result-strip{
  flex:none; display:flex; gap:14px; align-items:center; margin-top:12px; flex-wrap:wrap;
}
.actions{display:flex; gap:8px; flex-wrap:wrap}
.btn{
  font:inherit; font-weight:600; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  padding:9px 14px; border:2px solid var(--ink); border-radius:var(--radius);
  background:var(--paper); color:var(--ink); cursor:pointer;
  box-shadow:3px 3px 0 var(--ink); transition:transform .12s, box-shadow .12s;
  display:inline-flex; align-items:center; gap:6px;
}
.btn:hover:not(:disabled){transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink)}
.btn:disabled{opacity:.35; cursor:not-allowed; box-shadow:none}
.btn.primary{background:var(--ink); color:var(--paper)}
.narration-quote{
  flex:1; min-width:200px; padding:7px 12px; border-left:3px solid var(--ink);
  font-family:"Fraunces",Georgia,serif; font-style:italic; font-size:13.5px;
  background:var(--paper-2); border-radius:0 var(--radius) var(--radius) 0;
}
.hidden{display:none !important}
.retry-inline{margin-top:8px; display:none}
.retry-inline.show{display:block}

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:var(--paper); padding:10px 18px; border-radius:var(--radius);
  font-size:13px; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
  max-width:min(92vw,480px); text-align:center; z-index:60;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.toast.error{background:var(--danger)}

/* ---------- footer & modal ---------- */
footer{flex:none; margin-top:10px; border-top:2px solid var(--ink); padding-top:7px;
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; color:var(--muted); font-size:10.5px}
dialog{
  border:2px solid var(--ink); border-radius:var(--radius); box-shadow:6px 6px 0 var(--ink);
  background:var(--paper); color:var(--ink); padding:24px; max-width:560px; width:92vw;
}
dialog::backdrop{background:rgba(38,34,28,.45)}
dialog h3{font-family:"Fraunces",Georgia,serif; font-size:22px; margin-bottom:12px}
dialog p, dialog li{font-size:13px; color:var(--ink); margin-bottom:10px}
dialog ul{padding-left:18px}
dialog .closebtn{margin-top:8px}

/* mobile: natural flow */
@media (max-width:960px){
  .canvasframe{flex:none; aspect-ratio:3/4}
  .poster-img{max-height:none; width:100%; height:auto}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
}