/* builder-variants/v1-idea — CENTREPIECE: one sentence becoming a website. The idea types
 * itself into a prompt box, then the wireframe underneath fills in block by block — grey
 * skeleton to laid-out page — while a build bar names what Ting is doing.
 * Loaded after base.css, common.css and sections.css — everything shared is in those. */
.promptbox{display:flex;gap:10px;align-items:flex-start;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,204,0,.28);border-radius:15px;padding:13px 14px;position:relative}
.promptbox .pico{font-size:14px;line-height:1.5;flex:0 0 auto}
.ptxt{font-size:14px;line-height:1.5;color:rgba(255,255,255,.92);min-height:42px}
.caret{display:inline-block;width:2px;height:15px;background:var(--y);vertical-align:-2px;
  margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* the page being drawn. Blocks start as a grey skeleton and gain their colour, their
   accent and their shadow as each build stage lands on them. */
.frame{margin-top:18px;border-radius:15px;overflow:hidden;background:#0d0d13;
  border:1px solid rgba(255,255,255,.09);display:grid;gap:5px;padding:5px;
  transition:border-color .5s,box-shadow .5s}
.frame.ready{border-color:rgba(255,204,0,.35);box-shadow:0 0 0 1px rgba(255,204,0,.12),0 18px 40px rgba(0,0,0,.5)}
.blk{background:rgba(255,255,255,.035);border-radius:10px;padding:12px;opacity:.4;
  transform:translateY(6px);transition:opacity .5s ease,transform .5s ease,background .5s ease}
.blk.on{opacity:1;transform:none}
.blk .ln{display:block;height:8px;border-radius:9999px;background:rgba(255,255,255,.16);margin-bottom:7px;
  transition:background .5s,height .5s}
.blk .ln.w85{width:85%}.blk .ln.w70{width:70%}.blk .ln.w60{width:60%}
.blk .ln.w45{width:45%}.blk .ln.w35{width:35%}
.b1{min-height:86px;background:linear-gradient(150deg,rgba(255,255,255,.05),rgba(255,255,255,.02))}
.b1.on{background:linear-gradient(150deg,rgba(255,204,0,.13),rgba(255,255,255,.02))}
.b1.on .ln:first-child{height:13px;background:rgba(255,255,255,.85)}
.pbtn{display:block;width:74px;height:20px;border-radius:7px;background:rgba(255,255,255,.16);
  margin-top:11px;transition:background .5s}
.b1.on .pbtn{background:var(--ys)}
.b2{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.b2 .cell{height:44px;border-radius:8px;background:rgba(255,255,255,.07);transition:background .5s}
.b2.on .cell{background:linear-gradient(200deg,#3a3a46,#191921)}
.b2.on .cell:nth-child(2){background:linear-gradient(200deg,#43414e,#1a1820)}
.b2.on .cell:nth-child(3){background:linear-gradient(200deg,#35404c,#151a20)}
.b3.on .ln{background:rgba(255,255,255,.28)}
.b4{display:flex;gap:8px;align-items:center;padding:10px 12px}
.b4 .dotln{display:block;height:6px;width:46px;border-radius:9999px;background:rgba(255,255,255,.14)}
.b4.on .dotln:first-child{background:rgba(255,204,0,.5)}

/* build bar */
.buildbar{height:5px;border-radius:9999px;background:rgba(255,255,255,.07);margin-top:16px;overflow:hidden}
.buildbar i{display:block;height:100%;width:0;border-radius:9999px;background:var(--y);
  box-shadow:0 0 12px rgba(255,204,0,.5);transition:width .6s cubic-bezier(.22,1,.36,1)}
.bstep{display:flex;justify-content:space-between;align-items:center;font-size:12px;
  color:rgba(255,255,255,.6);margin-top:9px}
.bstep b{color:var(--y);font-weight:600;font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:reduce){.caret{animation:none;opacity:1}}