/* The Design tab: three steps (moodboard, logo, mockups), large pictures, a sticky bar with the next step. Purple with
   Claude's star = made by AI (Claude or ChatGPT image), like the brief's Claude panel. */
.dz .wtabs{margin-bottom:16px}

/* the three steps */
.dz-steps{display:flex;align-items:center;gap:10px;margin:2px 0 18px;flex-wrap:wrap}
.dz-steps>i{flex:0 1 40px;height:1px;background:var(--line-2)}
.dz-steps button{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 8px;border:0;border-radius:999px;background:var(--card);box-shadow:var(--lift);cursor:pointer;text-align:left;color:var(--ink-2)}
.dz-steps button b{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--fill);font:500 12px/1 var(--mono);color:var(--ink-2);flex:none}
.dz-steps button b .ico{width:15px;height:15px}
.dz-steps button span{display:flex;flex-direction:column;font-size:14px;font-weight:500;color:var(--ink);line-height:1.25}
.dz-steps button small{font-size:12px;font-weight:400;color:var(--ink-3)}
.dz-steps button.on{box-shadow:0 0 0 2px var(--ink)}
.dz-steps button.on b{background:var(--ink);color:#fff}
.dz-steps button.done b{background:#e8f8ee;color:#067647}

/* the big start card */
.dz-start{border-radius:var(--r);padding:44px 40px;color:#fff;margin-bottom:16px;min-height:300px;display:flex;flex-direction:column;justify-content:flex-end}
.dz-start .kicker{font:400 11px/1.4 var(--mono);letter-spacing:.07em;text-transform:uppercase;opacity:.8}
.dz-start h2{font-size:36px;line-height:1.08;letter-spacing:-.03em;margin:10px 0 12px;max-width:640px}
.dz-start p{max-width:620px;font-size:15.5px;line-height:1.55;opacity:.92;margin:0 0 22px}
.dz-big{height:58px;padding:0 28px;font-size:16.5px;border-radius:999px;background:#fff;color:#2a1a63;font-weight:500;gap:10px;align-self:flex-start;box-shadow:0 10px 30px rgba(30,10,90,.28)}
.dz-big .ico{width:19px;height:19px;color:#6436e0}
.dz-big:hover{transform:translateY(-1px)}
.dz-off{font-size:14px;opacity:.9}
.dz-purple{background:#6436e0;color:#fff}
.dz-purple:hover{background:#5326cf}
.dz-purple .ico{color:#fff}

/* waiting: Claude's orb and a line that changes */
.dz-wait{display:flex;flex-direction:column;align-items:center;text-align:center;padding:52px 20px;margin-bottom:16px}
.dz-wait h2{font-size:22px;margin:16px 0 6px}
.dz-wait p{color:#6c5bb0;font-size:14.5px;min-height:22px}
.dz-orb{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--g-violet);background-blend-mode:overlay,normal;color:#fff;box-shadow:0 10px 30px rgba(100,54,224,.35)}
.dz-orb .ico{width:28px;height:28px;animation:dzspin 5s linear infinite}
@keyframes dzspin{to{transform:rotate(360deg)}}

/* step 1: the moodboard */
.dz-why{margin-bottom:16px;padding:12px 16px}
.dz-why .csum-h{margin:0}
.dz-group{margin:0 0 30px}
.dz-ghead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 2px 12px}
.dz-ghead h2{font-size:21px;letter-spacing:-.02em}
.dz-qs{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;color:#6436e0}
.dz-qs .ico{width:14px;height:14px}
.dz-q{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;background:#f3efff;color:#4b2fb0;font-size:12.5px}
.dz-grid{columns:3 300px;column-gap:14px}
.dz-pic{position:relative;display:block;width:100%;margin:0 0 14px;padding:0;border:0;border-radius:18px;overflow:hidden;background:var(--c,#eee);cursor:pointer;break-inside:avoid;box-shadow:var(--lift);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.dz-pic img{display:block;width:100%;height:auto;transition:transform .35s var(--ease)}
.dz-pic:hover img{transform:scale(1.025)}
.dz-check{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.92);color:transparent;box-shadow:0 4px 14px rgba(0,0,0,.18);transition:background .15s,color .15s}
.dz-check .ico{width:18px;height:18px}
.dz-pic:hover .dz-check{color:var(--ink-3)}
.dz-pic.kept{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--ink)}
.dz-pic.kept .dz-check{background:var(--ink);color:#fff}
.dz-pwhy{position:absolute;left:10px;right:10px;bottom:10px;display:flex;gap:6px;align-items:flex-start;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.94);color:#4b2fb0;font-size:12.5px;line-height:1.35;text-align:left;opacity:0;transform:translateY(6px);transition:opacity .18s,transform .18s}
.dz-pwhy .ico{width:13px;height:13px;flex:none;margin-top:2px}
.dz-pic:hover .dz-pwhy,.dz-pic:focus-visible .dz-pwhy{opacity:1;transform:none}
.dz-gfoot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:2px}
.dz-own{display:flex;gap:6px;flex:1;min-width:260px;max-width:560px}
.dz-own input{flex:1;min-width:0;height:36px}

/* the bar with the next step */
.dz-bar{position:sticky;bottom:14px;z-index:5;display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0 14px;padding:10px 10px 10px 20px;border-radius:999px;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);box-shadow:0 10px 30px rgba(11,11,15,.12),0 0 0 1px var(--rl);font-size:14px}
.dz-bar b{font-family:var(--mono);font-weight:500}
.dz-bar .btn[disabled]{opacity:.45;pointer-events:none}
.dz-cost{font:400 12px/1.5 var(--mono);color:var(--ink-3);margin:6px 2px 0}
.banner.dz-running{background:#f5f1ff;color:#4b2fb0;box-shadow:inset 0 0 0 1px rgba(100,54,224,.16)}

/* step 2: ideas and the logo */
.dz-strip{display:flex;align-items:center;gap:8px;margin-bottom:14px;overflow-x:auto;padding:2px}
.dz-strip img{width:64px;height:80px;object-fit:cover;border-radius:10px;flex:none;background:var(--fill)}
.dz-ideas{margin-bottom:16px}
.dz-ideas .csum-h .spacer{flex:1}
.dz-idea-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;margin-top:10px}
.dz-idea{background:#fff;border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:5px}
.dz-idea i{font:400 11px/1 var(--mono);color:#8f80c4;font-style:normal}
.dz-idea b{font-size:15px;font-weight:500}
.dz-idea p{font-size:14px;line-height:1.5;color:var(--ink)}
.dz-idea small{font-size:12.5px;line-height:1.45;color:#6c5bb0}
.dz-logos{margin-bottom:16px}
.dz-logo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.dz-logo{display:flex;flex-direction:column;gap:10px}
.dz-logo .kicker{font:400 11px/1.4 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.dz-logo-img{aspect-ratio:1;border-radius:16px;background:repeating-conic-gradient(#f1f1f4 0 25%,#fff 0 50%) 0 0/18px 18px;display:grid;place-items:center;overflow:hidden;box-shadow:inset 0 0 0 1px var(--rl)}
.dz-logo-img img{max-width:88%;max-height:88%;object-fit:contain}
.dz-logo .btn.off{opacity:.45;pointer-events:none}
.dz-drop{aspect-ratio:1;flex-direction:column;cursor:pointer;color:var(--ink-3);font-size:13.5px}
.dz-drop .ico{width:22px;height:22px}
.dz-drop.over{border-color:var(--ink);color:var(--ink);background:var(--fill)}

/* step 3: mockups */
.dz-mhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.dz-mlogo{width:52px;height:52px;border-radius:12px;background:#fff;box-shadow:var(--lift);display:grid;place-items:center;overflow:hidden}
.dz-mlogo img{max-width:86%;max-height:86%;object-fit:contain}
.dz-mhead .dz-big{height:50px;font-size:15.5px;background:#6436e0;color:#fff;box-shadow:0 10px 26px rgba(100,54,224,.3)}
.dz-mhead .dz-big .ico{color:#fff}
.dz-mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:16px;margin-bottom:8px}
.dz-mock{position:relative;margin:0;border-radius:20px;overflow:hidden;background:var(--card);box-shadow:var(--lift)}
.dz-mock>img:first-child{display:block;width:100%;height:auto;background:var(--fill)}
.dz-mock.kept{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--ink)}
.dz-mtag{position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:999px;background:rgba(247,244,255,.95);color:#4b2fb0;font-size:12.5px;box-shadow:0 2px 10px rgba(0,0,0,.1)}
.dz-mtag .ico{width:13px;height:13px}
.dz-mref{position:absolute;top:12px;right:12px;width:46px;height:58px;object-fit:cover;border-radius:9px;box-shadow:0 0 0 2px #fff,0 4px 12px rgba(0,0,0,.2);opacity:.92}
.dz-mock figcaption{padding:12px 14px 14px}
.dz-macts{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.dz-macts .btn[aria-label]{margin-left:auto}
.dz-mnote{font-size:13px;color:#6c5bb0;margin:0 0 8px}
.dz-mold{display:flex;align-items:center;gap:6px;font-size:12.5px;color:#9a5b00;margin:0 0 8px}
.dz-mold .ico{width:14px;height:14px}
.dz-hint{font-style:normal}
.dz-redo{display:flex;flex-direction:column;gap:8px}
.dz-redo textarea{min-height:64px}
.dz-mock.making{aspect-ratio:2/3;display:flex;align-items:flex-start}
.dz-shimmer{position:absolute;inset:0;background:linear-gradient(110deg,#f3efff 8%,#e8e0ff 18%,#f3efff 33%);background-size:200% 100%;animation:dzsh 1.4s linear infinite}
@keyframes dzsh{to{background-position-x:-200%}}

@media (max-width:760px){
  .dz-start{padding:30px 22px;min-height:0}
  .dz-start h2{font-size:28px}
  .dz-grid{columns:2 150px;column-gap:10px}
  .dz-pic{margin-bottom:10px;border-radius:14px}
  .dz-mgrid{grid-template-columns:1fr}
  .dz-bar{bottom:calc(92px + env(safe-area-inset-bottom));border-radius:20px;padding:8px 8px 8px 16px;flex-wrap:nowrap}
  .dz-bar .dz-back,.dz-bar .dz-hint,.dz-again span{display:none}
  .dz-again{padding:0 12px;background:var(--fill)}
  .dz-again .ico{margin:0}
  .dz-bar .btn{white-space:nowrap}
  .dz-steps>i{display:none}
}
@media (prefers-reduced-motion:reduce){.dz-orb .ico,.dz-shimmer{animation:none}}