/* Quick Create — its own stylesheet, sharing only the brand's colours and
   fonts with the studio. It is deliberately not an import of cartoons.css:
   that file is written around a sidebar, a phase rail and a step-by-step
   production screen, none of which exist here, and inheriting it would mean
   inheriting a shape this product does not have.

   The wing is used far more on a phone than the studio is — someone animating
   a photo is usually holding the photo — so every measurement below starts
   from the narrow case and widens, rather than the other way round. */

:root{
  --ink:#14243b; --muted:#68727e; --line:#e6e8e5; --paper:#faf6f1;
  --coral:#e8735a; --coral-dark:#b8543c; --teal:#2f6f6b; --mint:#e8f3ef;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--paper);color:var(--ink);
  font:400 16px/1.55 "DM Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img,video{max-width:100%}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:12px;top:12px;z-index:9;padding:10px 14px;background:#fff;border-radius:8px}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* --- the bar across the top --------------------------------------------- */
.quick-header{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 20px;border-bottom:1px solid var(--line);background:#fff;flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;
  font:700 17px/1 "DM Sans",sans-serif;letter-spacing:.01em}
.brand b{color:var(--coral)}
.brand-signature{width:38px;height:auto}
.quick-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.quick-header .studio-account{display:flex;align-items:center;gap:8px}
.nav-chip,.credits-chip{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--line);
  border-radius:999px;background:#fff;color:#4a5867;font:600 14px/1 "DM Sans",sans-serif;
  text-decoration:none;cursor:pointer}
.nav-chip:hover{border-color:var(--coral);color:var(--coral-dark)}
.account-chip{color:var(--muted);font:500 13px/1.3 "Space Mono",monospace}

/* --- the page ------------------------------------------------------------ */
.quick-main{max-width:900px;margin:0 auto;padding:26px 20px 80px}
.quick-opening{padding:60px 0;color:var(--muted);text-align:center}
.quick-head h1{margin:0 0 8px;font:400 34px/1.15 "Libre Caslon Display",Georgia,serif}
.quick-head p{margin:0;max-width:60ch;color:#4a5867}
.quick-head+.quick-panel,.quick-head+.quick-actions{margin-top:22px}
.quick-back{margin:0 0 14px;padding:0;border:0;background:none;color:var(--muted);
  font:600 14px/1 "DM Sans",sans-serif;cursor:pointer}
.quick-back:hover{color:var(--coral-dark)}
.quick-foot{margin:34px 0 0;color:var(--muted);font-size:14px}
.quick-foot a{color:var(--coral-dark)}

/* --- what you can make --------------------------------------------------- */
.quick-actions{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:640px){.quick-actions{grid-template-columns:1fr 1fr}}
.quick-action{display:flex;flex-direction:column;gap:6px;padding:22px;border:1px solid var(--line);
  border-radius:11px;background:#fff;text-align:left;cursor:pointer;
  transition:border-color .16s,transform .16s}
.quick-action:hover{border-color:var(--coral);transform:translateY(-1px)}
.quick-action b{font:400 22px/1.2 "Libre Caslon Display",Georgia,serif}
.quick-action small{color:var(--muted);font-size:15px}
.quick-action.is-off{cursor:default;opacity:.65}
.quick-action.is-off:hover{border-color:var(--line);transform:none}
.quick-action em{color:var(--muted);font:700 11px/1 "Space Mono",monospace;letter-spacing:.1em;
  font-style:normal;text-transform:uppercase}

/* --- asking for one thing ------------------------------------------------ */
.quick-panel{padding:20px;border:1px solid var(--line);border-radius:11px;background:#fff}
.quick-field{display:block;margin:0 0 18px}
.quick-field:last-of-type{margin-bottom:0}
.quick-label{display:block;margin-bottom:8px;color:var(--muted);
  font:700 11px/1 "Space Mono",monospace;letter-spacing:.12em}
.quick-panel textarea{display:block;width:100%;padding:12px 14px;border:1px solid var(--line);
  border-radius:9px;background:#fff;color:var(--ink);
  font:400 16px/1.5 "DM Sans",sans-serif;resize:vertical}
.quick-panel textarea:focus-visible{outline:2px solid var(--coral);outline-offset:1px;border-color:var(--coral)}

.quick-chips{display:flex;flex-wrap:wrap;gap:10px}
.quick-chip{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:52px;
  padding:9px 16px;border:1px solid var(--line);border-radius:9px;background:#fff;color:#4a5867;
  font:600 15px/1.2 "DM Sans",sans-serif;cursor:pointer}
.quick-chip small{color:var(--muted);font:400 12px/1 "Space Mono",monospace}
.quick-chip:hover{border-color:var(--coral)}
.quick-chip.is-chosen{border-color:var(--coral);background:#fdf0ec;color:var(--coral-dark)}
.quick-chip.is-chosen small{color:var(--coral-dark)}

/* Never a dead technical box: it says what to drop and what happens next. */
.quick-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  min-height:150px;padding:22px;border:2px dashed #d7dcdf;border-radius:11px;background:#fdfcfb;
  text-align:center;cursor:pointer}
.quick-drop:hover{border-color:var(--coral);background:#fdf7f4}
.quick-drop b{font:600 16px/1.3 "DM Sans",sans-serif}
.quick-drop small{color:var(--muted)}
.quick-picture{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.quick-picture img{max-height:230px;border-radius:9px;border:1px solid var(--line)}

.quick-do{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:20px;
  padding-top:18px;border-top:1px solid var(--line)}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;
  border:1px solid transparent;border-radius:9px;font:700 15px/1 "DM Sans",sans-serif;cursor:pointer}
.button-primary{background:var(--coral);color:#fff}
.button-primary:hover{background:var(--coral-dark)}
.button-primary:disabled{opacity:.5;cursor:default;background:var(--coral)}
.outline-button{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 14px;
  border:1px solid var(--line);border-radius:8px;background:#fff;color:#4a5867;
  font:600 14px/1 "DM Sans",sans-serif;text-decoration:none;cursor:pointer}
.outline-button:hover{border-color:var(--coral);color:var(--coral-dark)}
.text-button{padding:0;border:0;background:none;color:var(--muted);
  font:600 14px/1 "DM Sans",sans-serif;text-decoration:underline;cursor:pointer}

.action-cost{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 14px;
  min-height:38px;border-radius:999px;background:#fdf0ec;white-space:nowrap}
.action-cost span{display:flex;align-items:center;color:var(--coral-dark);font:400 15px/1 "DM Sans",sans-serif}
.action-cost b{display:flex;align-items:center;font:700 14px/1 "Space Mono",monospace;color:#a8442f}
.action-cost.loading{padding:0;min-height:0;background:none;color:var(--muted);
  font:700 13px/1 "Space Mono",monospace}

.quick-message{margin:14px 0 0;padding:11px 14px;border-radius:8px;background:#fdf0ec;
  color:var(--coral-dark);font-size:14.5px;line-height:1.5}

/* --- while it is being made ---------------------------------------------- */
.quick-working{margin-top:20px}
.quick-progress{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:4px 12px;
  padding:14px 16px;border:1px solid var(--line);border-radius:9px;background:#fff}
.quick-progress b{grid-column:2;font:600 15px/1.3 "DM Sans",sans-serif}
.quick-progress small{grid-column:2;color:var(--muted);font-size:13.5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.quick-spinner{grid-row:1/3;width:20px;height:20px;border:2px solid #f0dcd5;border-top-color:var(--coral);
  border-radius:50%;animation:quick-turn 900ms linear infinite}
@keyframes quick-turn{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.quick-spinner{animation-duration:2600ms}}

/* --- what this session has made ------------------------------------------ */
.quick-made{margin-top:28px}
.quick-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:10px}
@media(min-width:620px){.quick-grid{grid-template-columns:1fr 1fr}}
.quick-result{margin:0;border:1px solid var(--line);border-radius:11px;background:#fff;overflow:hidden}
.quick-result img,.quick-result video{display:block;width:100%;height:auto;background:#f2efec}
.quick-result figcaption{display:flex;flex-direction:column;gap:10px;padding:12px 14px}
.quick-result small{color:var(--muted);font-size:13.5px;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.quick-result-do{display:flex;flex-wrap:wrap;gap:8px}

/* MyToonMaker's own mark: the four-pointed star of the favicon and the credit
   price, in place of the PhotoSerge signature (owner, 3 Oct 2026; the
   signature file is kept in assets/ for another platform). Sized to the
   brand line it sits in, so one rule serves every header. */
.brand-mark{display:block;flex:0 0 auto;width:1.2em;height:1.2em}