/* ChronoArs Build Studio (Oct 8, 2026): live preview panel on the Build your own page. Loaded by build.html only. */
.builder{grid-template-columns:200px minmax(0,1fr) 340px}
.side{display:grid;gap:18px;align-content:start;position:sticky;top:calc(var(--navh, 72px) + 18px)}
.side .summary{position:static}
.studio{border:1px solid var(--line);background:linear-gradient(180deg,#fdfcf9,#f6f1e8);padding:20px 20px 16px}
.studio-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:6px}
.studio-h .eb{display:block;color:#b0653b;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;font-weight:500}
.studio-h h3{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:1.7rem;margin:2px 0 0;line-height:1.1}
.studio-h h3 i{color:var(--accent)}
.studio-h .ill{border:1px solid #d9cdb7;color:#8a7a5e;font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;padding:3px 7px;white-space:nowrap;margin-top:4px}
.studio-v{display:grid;gap:14px}
.wv{margin:0;position:relative;background:radial-gradient(ellipse at 50% 42%,#fffdf8 0,#f3ece0 70%);border:1px solid #ece4d6}
.wv-stack{position:relative;width:100%;max-width:360px;margin:0 auto;overflow:hidden}
.wv-stack .ly{position:absolute;display:block;height:auto;max-width:none;transform-origin:50% 50%;pointer-events:none;user-select:none}
.wv-stack .ly-case{position:relative}
.wv-proto{position:absolute;left:8px;top:8px;background:#1f1b16;color:#f3ede3;font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;padding:3px 7px}
.wv-c{background:#f3ede3}
.wv-thumb{margin:0 auto 8px;width:34%;text-align:center}
.wv-thumb img{width:100%;aspect-ratio:1/1;object-fit:contain;background:#fff;border:1px solid #ece4d6;display:block}
.wv-thumb figcaption,.wv-photos figcaption{padding:4px 0 0;color:#8a7a5e;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase}
.wv-photos{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px;padding:12px 12px 4px}
.wv-photos figure{margin:0;text-align:center}
.wv-photos img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:#efebe4}
.wv-coming{margin:4px 12px 12px;text-align:center;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.05rem;color:#7a7368}
.wv-empty{display:grid;place-items:center;aspect-ratio:1/1;max-height:300px;width:100%;color:#8a7a5e;font-size:.75rem;text-align:center;padding:20px;box-sizing:border-box}
.wv figcaption{padding:0 8px 8px;text-align:center;color:#8a7a5e;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase}
.slots{display:grid;gap:8px}
.slot{all:unset;box-sizing:border-box;display:grid;grid-template-columns:52px 1fr auto;grid-template-rows:auto auto auto;column-gap:12px;align-items:center;padding:8px;border:1px solid var(--line);background:#fdfcf9;cursor:pointer;transition:border-color .2s}
.slot:hover,.slot:focus-visible{border-color:var(--ink)}
.slot img,.slot .ph{grid-row:1/4;width:52px;height:52px;object-fit:cover;background:#efebe4;display:block}
.slot .ph{border:1px dashed #cfc3ad;background:transparent}
.slot .sk{color:var(--muted);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase}
.slot .sn{font-size:.8rem;line-height:1.3;grid-column:2}
.slot .sn i{font-family:'Cormorant Garamond',serif;font-size:.98rem;color:#7a7368}
.slot .sv{grid-column:2;color:var(--muted);font-size:.68rem;line-height:1.35}
.slot .sp{grid-column:3;grid-row:1/4;font-size:.72rem;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.slot.on{border-color:#d6c7aa}
.slot.warn{border-color:#e2c9a4;background:#fbf4e8}
.slot.warn .sn i{color:#9a5b2c}
.extras{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.chipb{all:unset;box-sizing:border-box;cursor:pointer;font-size:.66rem;color:var(--muted);border:1px solid var(--line);padding:4px 8px;background:#fdfcf9;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chipb b{font-weight:500;color:var(--ink);letter-spacing:.12em;text-transform:uppercase;font-size:.58rem;margin-right:6px}
.chipb.on{border-color:#d6c7aa;color:var(--ink)}
.chipb:hover,.chipb:focus-visible{border-color:var(--ink)}
.snote{color:#7a7368;font-size:.7rem;line-height:1.55;margin:12px 0 0}
.snotes{margin:6px 0 0;padding-left:16px;color:#8a857c;font-size:.68rem;line-height:1.5}
@media (max-width:1180px){.builder{grid-template-columns:180px minmax(0,1fr) 300px;gap:28px}}
@media (max-width:1080px){.builder{grid-template-columns:minmax(0,1fr) 320px}}
@media (max-width:760px){
  .builder{grid-template-columns:minmax(0,1fr)}
  .side{display:contents}
  .steps{order:0}.studio{order:1}.stage{order:2}.summary{order:3}
  .studio{padding:16px 14px 14px}
  .studio-v{grid-template-columns:1fr}
  .wv-stack{max-width:260px}
  .wv-empty{aspect-ratio:auto;min-height:120px}
  .slots{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .slot{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:6px}
  .slot img,.slot .ph{width:100%;height:auto;aspect-ratio:1/1;margin-bottom:4px}
  .slot .sn{font-size:.72rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .slot .sn i{font-size:.86rem}
  .slot .sv{font-size:.62rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .slot .sp{font-size:.7rem;margin-top:auto;padding-top:2px}
}
@media (max-width:360px){.slots{grid-template-columns:1fr}.slot{flex-direction:row;align-items:center}.slot img,.slot .ph{width:44px;margin:0 8px 0 0}}