:root{--ink:#172440;--ink2:#40506b;--muted:#66758c;--blue:#355fe7;--blueDark:#2149cd;--blueLight:#edf2ff;--sky:#f5f7fd;--cream:#fbf9f3;--line:#dfe5ef;--lineWarm:#e8e1d5;--green:#adf0c5;--greenInk:#0b7351;--white:#fff;--shadow:0 16px 42px rgba(30,46,79,.09)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:linear-gradient(175deg,#fbf9f4 0%,#f8f9fe 46%,#f7f9fb 100%);font-family:Inter,"Segoe UI",Arial,sans-serif;color:var(--ink);font-size:14px;-webkit-font-smoothing:antialiased}button,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}a{color:inherit;text-decoration:none}svg{width:20px;height:20px;flex-shrink:0}button:focus-visible,a:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #8ca6ff;outline-offset:3px} [hidden]{display:none!important}
.preview{height:auto;min-height:32px;background:#172440;color:#c7d6f2;display:flex;align-items:center;justify-content:space-between;padding:5px max(18px,calc((100vw - 1100px)/2));gap:10px;font-size:11px}.preview strong{color:white;font-weight:650}.preview div{display:flex;gap:6px}.preview button{border:1px solid #6c7fa3;color:#dce8ff;background:transparent;border-radius:7px;padding:5px 9px;font-size:11px}.preview button[aria-pressed=true]{background:#e9eeff;color:#14223d;border-color:#e9eeff}
.shell{max-width:1100px;padding:0 20px;margin:auto}.site-header{height:68px;border-bottom:1px solid var(--lineWarm);display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{display:flex;align-items:center;gap:10px;font-size:21px;font-weight:800;letter-spacing:-.8px;white-space:nowrap}.brand-symbol{height:34px;width:34px;display:grid;place-items:center;background:#355fe7;border-radius:11px;color:#fff;box-shadow:3px 3px 0 #c8d6ff}.brand-symbol svg{width:20px;height:20px}.brand .two{color:var(--blue)}.header-side{display:flex;gap:24px;align-items:center}.header-trust{display:flex;gap:7px;align-items:center;color:#5b6880;font-size:12px;font-weight:550}.header-trust svg{width:15px;height:15px;color:var(--greenInk)}.header-link{font-weight:650;font-size:12px;color:#40506b;white-space:nowrap}.header-link:hover{color:var(--blue)}
.intro{display:flex;justify-content:space-between;gap:28px;align-items:end;padding:27px 0 23px}.intro-copy{max-width:850px}.eyebrow{display:inline-flex;align-items:center;gap:7px;font-weight:750;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:#4261a7;margin-bottom:9px}.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:#355fe7}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(24px,2.45vw,34px);line-height:1.19;letter-spacing:-1.05px;margin-bottom:9px;font-weight:800}h1 em{font-style:normal;color:#305cdf} .intro p{font-size:13px;line-height:1.6;color:#5e6b7e;margin-bottom:0;max-width:790px}.intro-note{flex:0 0 auto;background:#fff;border:1px solid #e4e8ef;box-shadow:0 4px 12px #2a376211;border-radius:10px;padding:10px 12px;font-size:11px;display:flex;align-items:center;gap:7px;color:#56647a}.intro-note svg{width:16px;height:16px;color:#3564cb}
.workspace{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border:1px solid #d4dfef;border-radius:18px;overflow:hidden;background:#fff;box-shadow:var(--shadow);margin-bottom:46px}.panel{min-width:0;padding:26px 27px 22px;display:flex;flex-direction:column}.input-panel{background:#fff}.output-panel{background:linear-gradient(145deg,#1a2e54,#152747 70%);color:#fff}.stephead{display:flex;align-items:flex-start;gap:12px;margin-bottom:17px}.number{display:grid;place-items:center;background:#e9efff;border:1px solid #cbd8ff;color:var(--blueDark);width:30px;height:30px;flex:0 0 30px;border-radius:10px;font-size:13px;font-weight:800}.output-panel .number{background:#35538a;border-color:#5472a4;color:#fff}.stephead h2{font-size:19px;letter-spacing:-.4px;line-height:1.25;margin:1px 0 4px;font-weight:800}.stephead p{font-size:12px;color:#69778b;line-height:1.45;margin:0}.output-panel .stephead p{color:#b5c7e5}
textarea{width:100%;display:block;min-height:175px;resize:vertical;border:1.5px solid #cbd6e8;border-radius:12px;background:#fcfdff;color:#243451;padding:16px;font-size:15px;line-height:1.58;box-shadow:0 2px 6px #1a2e4810}textarea::placeholder{color:#8490a4}textarea:focus{outline:none;border-color:#426bea;box-shadow:0 0 0 4px #e5ebff}.under-input{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:9px;margin-top:12px}.examples-label{font-size:11px;font-weight:650;color:#66758d}.example-chips{display:flex;flex-wrap:wrap;gap:6px}.example-chips button{background:#f1f5ff;border:1px solid #dce5ff;color:#3054ac;border-radius:999px;padding:8px 11px;font-size:11px;font-weight:650}.example-chips button:hover{background:#e2eaff}.charcount{font-size:10px;color:#7b879b;margin-left:auto;white-space:nowrap}.action{margin-top:auto;padding-top:20px}.action-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}.action-top .action-label{font-size:11px;color:#67768a;font-weight:650}.action-top .action-label strong{color:#355fe7}.action-top .no-signup{font-size:10px;color:#738094}.generate{border:0;border-radius:11px;background:var(--blue);color:white;width:100%;min-height:53px;padding:10px 15px;display:flex;align-items:center;gap:10px;justify-content:center;font-size:15px;font-weight:780;box-shadow:0 7px 18px #355fe72a;transition:background .15s,transform .15s}.generate:hover{background:var(--blueDark)}.generate:active{transform:translateY(1px)}.generate svg{width:18px;height:18px}.status{min-height:15px;margin:8px 0 0;font-size:11px;line-height:1.5;color:#586b87}.status.error{color:#b53e36}
.flow-arrow{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);z-index:3;width:37px;height:37px;background:#ffffff;color:var(--blueDark);border-radius:50%;border:3px solid #e2e9ff;box-shadow:0 4px 12px #132b5040;display:grid;place-items:center;pointer-events:none}.flow-arrow svg{width:18px;height:18px}
.output-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:-1px}.output-top .mode{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#adf0c5}.mode::before{content:'●';font-size:8px;margin-right:7px}.output-sheet{display:flex;flex-direction:column;min-height:210px;margin:10px 0 15px;flex:1}.empty-result{border:1px dashed #6580ad;border-radius:12px;background:rgba(255,255,255,.045);padding:28px 16px 23px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;flex:1;min-height:210px}.empty-symbol{width:59px;height:63px;border-radius:10px;background:#eef3ff;box-shadow:5px 5px 0 #344e79;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:15px;transform:rotate(-4deg)}.empty-symbol span{height:4px;border-radius:2px;background:#acbfeb;width:100%}.empty-symbol span:last-child{width:61%}.empty-result strong{margin-top:9px;font-size:16px}.empty-result p{font-size:12px;color:#b8c8e2;line-height:1.55;max-width:260px;margin:0}.result-paper{background:#f7faff;color:#263750;border-radius:12px;border:1px solid #bfd0ed;padding:18px 20px;min-height:210px;box-shadow:0 4px 14px #0017331f}.paper-title{display:flex;justify-content:space-between;gap:10px;color:#315abd;font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:10px;margin-bottom:11px}.paper-title span{color:#798aa6;font-weight:650;letter-spacing:0;text-transform:none}.prompt-section{display:grid;grid-template-columns:85px minmax(0,1fr);gap:8px;padding:8px 0;border-bottom:1px solid #dce5f3}.prompt-section:last-child{border-bottom:0}.prompt-section strong{font-size:11px;color:#3052a4}.prompt-section p{font-size:12px;line-height:1.55;margin:0;overflow-wrap:anywhere}.result-note{margin:9px 0 0;color:#bad0ed;font-size:11px}.copy-btn{margin-top:auto;background:#adf0c5;border:1px solid #adf0c5;color:#173e31;border-radius:11px;min-height:47px;display:flex;align-items:center;justify-content:center;gap:9px;font-weight:800;font-size:14px;width:100%;transition:background .15s}.copy-btn:not(:disabled):hover{background:#cbf9d9}.copy-btn:disabled{background:#445b7f;color:#a9bfdc;border-color:#55709b}.copy-btn svg{width:18px;height:18px}.output-under{font-size:11px;line-height:1.55;color:#bdd0eb;margin:10px 0 0}.output-status{color:#adf0c5;min-height:0}
.difference{margin-bottom:35px}.section-intro{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:17px}.section-intro .eyebrow{margin-bottom:7px}.section-intro h2{font-size:25px;letter-spacing:-.7px;line-height:1.2;margin:0 0 5px}.section-intro p{font-size:12px;line-height:1.5;color:#6a768b;margin:0}.section-note{color:#6f7d96;font-size:11px;border:1px solid #dce4ef;padding:8px 10px;background:white;border-radius:8px;white-space:nowrap}.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.example-card{background:#fff;border:1px solid #e0e6f0;border-radius:14px;padding:17px 18px 14px;box-shadow:0 6px 18px rgba(26,48,90,.035);min-width:0;transition:border-color .15s,box-shadow .15s}.example-card:hover{border-color:#b7c9f5;box-shadow:0 9px 23px #244a9210}.card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:13px}.card-name{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800}.card-icon{display:grid;place-items:center;background:#eaf0ff;border-radius:8px;color:#345be1;width:27px;height:27px}.card-icon svg{width:16px;height:16px}.card-result{font-size:10px;letter-spacing:.02em;color:#4b679f;font-weight:750;background:#f0f4ff;border-radius:5px;padding:5px 7px}.before-after{display:grid;grid-template-columns:minmax(0,.78fr) 26px minmax(0,1.25fr);align-items:center;gap:8px}.before,.after{min-width:0}.mini-label{font-size:10px;font-weight:750;letter-spacing:.04em;text-transform:uppercase;margin:0 0 6px;color:#7b8ba5}.before p{color:#707a8c;font-style:italic;font-family:Georgia,serif;font-size:15px;line-height:1.35;margin:0}.after{border-radius:9px;background:#f0f6ff;padding:10px 11px;border:1px solid #dce8ff}.after .mini-label{color:#315acb}.after p{font-size:12px;line-height:1.45;color:#253d68;margin:0;font-weight:560}.mini-arrow{width:26px;height:26px;display:grid;place-items:center;color:#3863de;background:#edf2ff;border-radius:50%}.mini-arrow svg{width:16px;height:16px}.card-details{border-top:1px solid #e7edf5;margin-top:11px;padding-top:10px}.card-details summary{cursor:pointer;font-size:11px;font-weight:750;color:#3159bd;display:flex;align-items:center;justify-content:space-between;list-style:none;gap:12px;min-height:22px}.card-details summary::-webkit-details-marker{display:none}.card-details summary::after{content:'+';font-size:17px;font-weight:500;line-height:1}.card-details[open] summary::after{content:'−'}.card-details p{margin:10px 0 2px;font-size:12px;line-height:1.6;color:#43536e;background:#f7f9fc;border:1px solid #e6eaf2;padding:10px 12px;border-radius:7px}.foot{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 0 30px;border-top:1px solid var(--lineWarm);font-size:11px;color:#79869c}.foot .brand{font-size:15px}.foot .brand-symbol{height:25px;width:25px;border-radius:7px;box-shadow:2px 2px 0 #c8d6ff}.foot .brand-symbol svg{width:15px;height:15px}.foot-links{display:flex;gap:20px}.foot-links span{color:#818ca0}.after mark{background:#dce7ff;color:inherit;border-radius:3px;padding:0 2px}
@media(max-width:900px){.intro-note{display:none}.workspace{margin-bottom:35px}.panel{padding:23px 22px 20px}.stephead h2{font-size:18px}.cards{gap:12px}.example-card{padding:15px}.card-result{display:none}}
@media(max-width:700px){.shell{padding:0 15px}.site-header{height:61px}.header-side{gap:12px}.header-link{font-size:11px}.header-trust{font-size:10px}.brand{font-size:19px}.brand-symbol{height:30px;width:30px}.intro{padding:19px 0 18px}.eyebrow{font-size:9px;margin-bottom:8px}h1{font-size:25px;letter-spacing:-.7px;margin-bottom:7px}.intro p{font-size:12px}.workspace{grid-template-columns:minmax(0,1fr);border-radius:14px;margin-bottom:31px}.panel{padding:20px 19px}.stephead{margin-bottom:13px}.input-panel{padding-bottom:18px}.output-panel{padding-top:23px}.stephead h2{font-size:18px}.flow-arrow{left:50%;top:auto;bottom:auto;transform:translate(-50%,-50%) rotate(90deg);margin-top:-1px;top:calc(50% + 5px);display:none}textarea{min-height:128px;font-size:16px;padding:13px}.under-input{gap:8px}.action{padding-top:15px}.output-sheet{margin:5px 0 12px;min-height:145px}.empty-result{min-height:145px;padding:14px}.empty-symbol{width:42px;height:45px;padding:10px;gap:5px}.empty-result strong{font-size:14px;margin-top:3px}.empty-result p{font-size:11px}.result-paper{padding:14px;min-height:155px}.section-intro h2{font-size:23px}.section-note{display:none}.cards{grid-template-columns:1fr;gap:11px}.example-card{padding:14px 15px}.before-after{grid-template-columns:minmax(0,.85fr) 24px minmax(0,1.15fr)}.foot{flex-wrap:wrap;gap:10px}.foot-links{gap:15px}.preview{padding:6px 12px}}
@media(max-width:380px){.shell{padding:0 12px}.brand{font-size:17px}.header-trust{display:none}.intro p{font-size:11px}h1{font-size:23px}.panel{padding:17px 14px}.stephead h2{font-size:17px}.under-input{display:block}.example-chips{margin-top:8px}.charcount{margin-top:7px}.action-top .no-signup{display:none}.card-head{flex-wrap:wrap}.before-after{grid-template-columns:minmax(0,1fr);gap:9px}.mini-arrow{transform:rotate(90deg);margin:0 auto}.before p{font-size:14px}.example-card{padding:14px}.preview{font-size:10px}.preview button{font-size:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.generate,.copy-btn,.example-card{transition:none}}

/* The four compact examples match the approved transformation-card concept.
   No marketing pills, benefit badges or framed subtitle tag. */
.showcase-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;
}
.showcase-card{
  min-width:0;background:#fff;border:1px solid #dfe6f0;border-radius:14px;
  padding:16px 18px;box-shadow:0 5px 15px rgba(26,48,90,.025);
}
.showcase-card-header{display:flex;align-items:center;gap:10px;margin-bottom:15px}
.showcase-card-heading{display:flex;align-items:center;gap:10px;min-width:0}
.showcase-card-heading h3{font-size:15px;line-height:1.25;font-weight:780;margin:0;color:#172440}
.showcase-icon{
  width:27px;height:27px;flex:0 0 27px;display:grid;place-items:center;
  border-radius:6px;background:#e5edff;color:#315aca;font-weight:750;font-size:15px;
}
.showcase-transform{position:relative;padding-left:23px}
.showcase-transform::before{
  content:"";position:absolute;top:2px;bottom:4px;left:10px;width:2px;
  background:linear-gradient(to bottom,#ea5773 0%,#e67881 33%,#36b49b 77%,#22b890 100%);
}
.showcase-rough-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 9px;margin:0 0 11px}
.showcase-rough-label{font-family:Consolas,"Courier New",monospace;font-size:11px;line-height:1.55;font-weight:750;color:#c21e43;text-transform:uppercase;white-space:nowrap}
.showcase-rough-input{font-size:13px;line-height:1.5;color:#151c2c;font-style:normal;font-weight:500}
.showcase-after-label{font-family:Consolas,"Courier New",monospace;font-size:11px;line-height:1.55;font-weight:750;color:#067653;text-transform:uppercase;margin:0 0 6px}
.showcase-after-text{
  margin:0;padding:11px 13px;border-radius:9px;border:1px solid #dbe3ef;
  background:#f6f8fc;color:#172440;font-size:12.5px;line-height:1.65;
}
.showcase-after-text mark{
  background:#e3ecff;color:#184b9a;padding:0 3px;border:1px solid #bbcff8;border-radius:3px;font-weight:700;
}
@media(max-width:700px){
  .showcase-grid{grid-template-columns:1fr;gap:12px}
  .showcase-card{padding:15px 15px}
  .showcase-card-header{margin-bottom:13px}
  .showcase-after-text{font-size:12.5px;line-height:1.6}
}
@media(max-width:380px){
  .showcase-card{padding:14px 12px}
  .showcase-transform{padding-left:18px}
  .showcase-transform::before{left:6px}
  .showcase-card-heading h3{font-size:14px}
  .showcase-rough-label,.showcase-after-label{font-size:10px}
  .showcase-rough-input,.showcase-after-text{font-size:12px}
  .showcase-after-text{padding:10px}
}

/* Compact laptop-first workspace. Visual theme remains blue; only layout and hierarchy change. */
.preview{max-width:1100px;margin:20px auto 25px;min-height:0;border-radius:8px;padding:9px 16px;background:#233957}
.site-header{height:59px}
.brand{font-size:20px}
.brand-symbol{height:31px;width:31px;border-radius:9px}
.intro{display:block;padding:18px 0 17px}
.intro-copy{max-width:none}
h1{font-size:clamp(23px,2.15vw,29px);line-height:1.19;letter-spacing:-.7px;margin:0 0 7px}
.intro p{max-width:960px;font-size:12.5px;line-height:1.48}
.workspace{margin-bottom:32px;border-radius:14px}
.panel{padding:20px 23px 18px}
.stephead{gap:12px;margin-bottom:13px;align-items:flex-start}
.number{width:33px;height:33px;flex-basis:33px;border-radius:50%;background:#355fe7;color:#fff;border:0;font-size:14px}
.output-panel .number{background:#355fe7;border:1px solid #83a2f7}
.stephead h2{font-size:19px;margin:2px 0 5px;line-height:1.18}
.stephead p{font-size:11.5px;line-height:1.4}
textarea{min-height:137px;height:137px;padding:14px 15px;font-size:15px;line-height:1.53}
.under-input{margin-top:10px;gap:7px}
.example-chips button{padding:7px 10px}
.action{margin-top:0;padding-top:13px}
.generate{min-height:54px;justify-content:flex-start;padding:9px 15px;gap:12px}
.generate-step{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;border:1px solid rgba(255,255,255,.68);border-radius:50%;font-size:12px;font-weight:800;line-height:1}
.generate-label{font-size:15px}
.generate-arrow{margin-left:auto;font-size:24px;line-height:1;font-weight:450}
.status{margin-top:6px}
.flow-arrow{top:52%}
.output-sheet{min-height:0;flex:1;margin:0 0 10px}
.empty-result{min-height:167px;padding:18px 12px 14px;gap:6px}
.empty-symbol{width:45px;height:48px;padding:11px;gap:4px;border-radius:7px}
.empty-symbol span{height:3px}
.empty-result strong{font-size:15px;margin-top:7px}
.empty-result p{font-size:11px}
.result-paper{min-height:167px;padding:13px 15px}
.copy-btn{min-height:48px}
.result-note{font-size:10px;margin-top:6px}
/* Make the desktop action accessible even on shorter 600px-height laptop viewports. */
@media (max-height:680px) and (min-width:701px){
  .site-header{height:55px}
  .intro{padding:11px 0 12px}
  h1{font-size:26px;margin-bottom:5px}
  .panel{padding:17px 21px 15px}
  .stephead{margin-bottom:10px}
  textarea{height:119px;min-height:119px;padding:12px 14px}
  .under-input{margin-top:8px}
  .example-chips button{padding:6px 9px}
  .action{padding-top:11px}
  .generate{min-height:49px}
  .empty-result,.result-paper{min-height:145px}
  .empty-symbol{width:40px;height:43px}
}
@media(max-width:900px){
  .panel{padding:19px}
  .header-side{gap:14px}
  .intro{padding:16px 0}
  textarea{min-height:126px;height:126px}
  .stephead h2{font-size:18px}
}
@media(max-width:700px){
  .header-trust{display:none}
  .site-header{height:58px}
  .intro{padding:17px 0 15px}
  h1{font-size:24px;line-height:1.2}
  .intro p{font-size:12px;line-height:1.5}
  .workspace{margin-bottom:29px}
  .panel{padding:18px 17px}
  .stephead{margin-bottom:12px}
  .number{height:31px;width:31px;flex-basis:31px}
  .stephead h2{font-size:18px}
  textarea{min-height:128px;height:128px;font-size:16px}
  .under-input{margin-top:10px}
  .action{padding-top:13px}
  .generate{min-height:51px}
  .output-sheet{margin:1px 0 12px}
  .empty-result{min-height:146px}
  .result-paper{min-height:145px}
  .preview{margin:14px 12px 22px}
}
@media(max-width:380px){
  .intro{padding:15px 0 12px}
  h1{font-size:22px}
  .panel{padding:17px 14px}
  .stephead{gap:9px}
  .stephead h2{font-size:17px}
  .example-chips{margin-top:7px}
  .under-input{display:flex}
  .examples-label{width:100%}
  .charcount{margin-left:auto}
  .generate-label{font-size:14px}
  .generate{gap:9px;padding:9px 12px}
}

/* 3-step workbench: narrow input, central generation action, roomy unchanged output. */
.shell{max-width:1190px}
.workspace{
  grid-template-columns:minmax(0, .87fr) minmax(145px,.34fr) minmax(0,1.18fr);
  overflow:hidden;
  align-items:stretch;
  border-radius:16px;
}
.input-panel{border-right:0}
.output-panel{min-width:0}
.middle-panel{
  min-width:0;display:flex;flex-direction:column;align-items:stretch;
  padding:20px 10px 17px;
  background:linear-gradient(180deg,#edf3ff 0%,#f3f6fd 58%,#edf3ff 100%);
  border-left:1px solid #d7e2fc;border-right:1px solid #c2cfe5;
  position:relative;
}
.middle-panel .action{padding:0;margin:0;position:relative;z-index:1}
.middle-panel .generate{
  width:100%;min-height:100px;max-height:none;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:7px;
  padding:13px 7px 11px;border-radius:12px;
  text-align:center;line-height:1.25;
  box-shadow:0 7px 17px rgba(39,74,164,.19);
}
.middle-panel .generate-step{
  width:30px;height:30px;flex:0 0 30px;font-size:13px;
  border:1px solid rgba(255,255,255,.65);
}
.middle-panel .generate-label{
  font-size:13px;line-height:1.23;font-weight:790;
  white-space:normal;overflow-wrap:normal;
}
.middle-panel .generate-arrow{
  margin:0;font-size:20px;line-height:.8;font-weight:600;
}
.middle-panel .status{line-height:1.4;font-size:11px;text-align:center;overflow-wrap:anywhere}
.middle-panel .status:empty{display:none}
/* Subtle flow line, not a second control. */
.middle-panel::after{
  content:"";position:absolute;top:137px;bottom:23px;
  left:50%;width:1px;background:linear-gradient(#c9d9f7,transparent);
  pointer-events:none;
}
/* Keep the input appropriately compact: users submit brief rough tasks. */
.input-panel textarea{min-height:116px;height:116px}
.output-panel .output-sheet{min-width:0}
@media (max-height:680px) and (min-width:901px){
  .middle-panel{padding:17px 10px 14px}
  .middle-panel .generate{min-height:89px;gap:5px}
  .middle-panel::after{top:126px}
  .input-panel textarea{height:110px;min-height:110px}
}
@media (min-width:901px) and (max-width:1070px){
  .shell{padding-left:16px;padding-right:16px}
  .workspace{grid-template-columns:minmax(0,.82fr) minmax(130px,.34fr) minmax(0,1.2fr)}
  .panel{padding-left:15px;padding-right:15px}
  .middle-panel{padding-left:8px;padding-right:8px}
  .middle-panel .generate-label{font-size:12px}
}
/* Below laptop/tablet width, stack in chronological order: 1 → 2 → 3. */
@media(max-width:900px){
  .workspace{grid-template-columns:minmax(0,1fr)}
  .input-panel{padding-bottom:17px}
  .middle-panel{
    border-left:0;border-right:0;border-top:1px solid #dce5f5;border-bottom:1px solid #dce5f5;
    padding:12px 19px;background:#f2f6ff;
  }
  .middle-panel::after{display:none}
  .middle-panel .generate{
    min-height:51px;flex-direction:row;gap:12px;padding:9px 14px;
    justify-content:flex-start;text-align:left;
  }
  .middle-panel .generate-step{width:29px;height:29px;flex:0 0 29px}
  .middle-panel .generate-label{font-size:15px}
  .middle-panel .generate-arrow{margin-left:auto;font-size:22px}
  .middle-panel .status{text-align:left}
  .input-panel textarea{height:131px;min-height:131px}
}
@media(max-width:700px){
  .middle-panel{padding:11px 17px}
  .middle-panel .generate{min-height:52px}
}
@media(max-width:380px){
  .middle-panel{padding:10px 14px}
  .middle-panel .generate-label{font-size:14px}
  .input-panel textarea{height:120px;min-height:120px}
}

/* Focused revisions to the approved THREE-STEP original; preserve its typography,
   compact laptop layout, existing examples, preview functionality, and proportions. */
.site-header .brand{font-size:23px;gap:11px}
.site-header .brand-symbol{height:39px;width:39px;border-radius:11px}
.site-header .brand-symbol svg{width:23px;height:23px}
.header-trust-pill{
  display:flex;align-items:center;gap:10px;
  border:1px solid #d9e3f1;border-radius:999px;background:#f3f6fc;
  padding:8px 13px;color:#203451;font-size:12px;font-weight:720;
  white-space:nowrap;
}
.header-trust-pill .trust-free{color:#285be9}
.header-trust-pill .trust-sep{color:#b6c4d7}
/* Let BOTH panels have their own visibly rounded edges, including inward-facing edges. */
.workspace{
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.input-panel{
  min-width:0;
  border:2px solid #cddcf3;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(30,54,102,.07);
}
.output-panel{
  min-width:0;
  border:2px solid #324d7b;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(20,38,75,.1);
}
.middle-panel{
  background:transparent;
  border-left:0;
  border-right:0;
  padding:17px 8px 14px;
}
/* Step 2 is exactly top-aligned with both cards. Its circle shares the
   SAME vertical position and 33px diameter as the 1 and 3 circles. */
.middle-panel{padding:0 8px 14px}
.middle-panel .generate{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:center;
  gap:5px;
  width:100%;
  min-height:112px;
  margin:0;
  padding:22px 6px 8px;
  border-radius:12px;
  position:relative;
  text-align:center;
  box-shadow:0 6px 17px rgba(39,74,164,.2);
  transition:background .18s ease,box-shadow .18s ease;
}
.middle-panel .generate-step{
  display:grid;place-items:center;
  width:33px;height:33px;flex:0 0 33px;
  border-radius:50%;font-size:14px;
  border:1px solid rgba(255,255,255,.65);
}
.middle-panel .generate-label{
  max-width:none;
  font-size:12.5px;line-height:1.23;
  font-weight:790;
  text-align:center;
  white-space:nowrap;
  overflow-wrap:normal;
}
.middle-panel .generate-arrow{
  font-size:20px;line-height:1;
  font-weight:600;
  align-self:center;
  margin:0;
  animation:step2Arrow 1.85s ease-in-out infinite;
}
.middle-panel .status{line-height:1.4;font-size:11px;text-align:center;overflow-wrap:anywhere}
.middle-panel .status:empty{display:none}
.middle-panel::after{top:126px;bottom:18px;opacity:.6}
/* Only the small arrow moves: avoid motion of the button and text while typing. */
@keyframes step2Arrow{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
.middle-panel .generate:not(:disabled):hover{
  background:#244fda;
  box-shadow:0 9px 22px rgba(39,74,164,.3);
}
.middle-panel .generate:not(:disabled):focus-visible{outline:3px solid #96b4ff;outline-offset:4px}
/* More writing room, with example chips consistently anchored to the bottom. */
.input-panel textarea{flex:1;min-height:164px;height:auto}
.input-panel .under-input{margin-top:auto;padding-top:12px}
@media (max-height:680px) and (min-width:901px){
  .middle-panel{padding-top:0}
  .middle-panel .generate{min-height:106px;padding-top:19px;padding-bottom:8px}
  .middle-panel::after{top:128px}
  .input-panel textarea{min-height:149px;height:auto}
}
@media (min-width:901px) and (max-width:1070px){
  .middle-panel{padding-left:6px;padding-right:6px}
  .middle-panel .generate-label{font-size:11.5px;max-width:none;white-space:nowrap}
}
@media(max-width:900px){
  .workspace{grid-template-columns:minmax(0,1fr);gap:11px}
  .middle-panel{padding:0;min-width:0;border:0;background:transparent}
  .middle-panel::after{display:none}
  .middle-panel .generate{
    display:flex;min-height:52px;
    flex-direction:row;justify-content:flex-start;align-items:center;
    padding:9px 14px;gap:12px;
  }
  .middle-panel .generate-step{width:33px;height:33px;flex:0 0 33px}
  .middle-panel .generate-label{font-size:15px;white-space:normal;max-width:none;text-align:left}
  .middle-panel .generate-arrow{margin-left:auto;font-size:22px}
  .input-panel textarea{min-height:154px}
}
@media(max-width:700px){
  .site-header{height:auto;min-height:59px;gap:8px;flex-wrap:wrap;padding:10px 0}
  .site-header .brand{font-size:20px;gap:9px}
  .site-header .brand-symbol{width:34px;height:34px}
  .header-trust-pill{font-size:10px;padding:7px 9px;gap:6px}
  .input-panel textarea{min-height:145px}
}
@media(max-width:380px){
  .site-header .brand{font-size:18px}
  .site-header .brand-symbol{height:32px;width:32px}
  .header-trust-pill{font-size:9px;gap:5px}
  .input-panel textarea{min-height:140px}
  .middle-panel .generate-label{font-size:14px}
}
@media(prefers-reduced-motion:reduce){
  .middle-panel .generate-arrow{animation:none}
}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.shell>.site-header,.shell>main,.shell>.foot{width:100%;max-width:none;margin-inline:0}
.tool-nav{display:flex;align-items:center;gap:15px}
.tool-nav .header-link[aria-current=page]{color:var(--blue);font-weight:800}
@media(max-width:700px){.header-side{width:100%;justify-content:space-between;gap:9px;flex-wrap:wrap}.tool-nav{flex:1;justify-content:space-between;gap:9px}.header-trust-pill{white-space:nowrap}}
@media(max-width:430px){.header-side{justify-content:flex-start}.tool-nav{flex:1 1 100%}.header-trust-pill{margin-inline:auto}}
.generated-prompt{margin:0;max-height:360px;overflow:auto;color:#263750;font:inherit;font-size:12px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;tab-size:2}
.status[data-kind=error]{color:#b53e36}.status[data-kind=success]{color:#096f4d}.status[data-kind=loading]{color:#40506b}
textarea::placeholder,.charcount{color:#66758c}
.output-panel .stephead h2{color:#fff}