/* StockStudio design tokens — adopt this file app-wide. */
:root{
  /* color */
  --ss-bg:#0A0A0E;
  --ss-ink:#ECECE8;
  --ss-dim:#8A8A93;
  --ss-hair:#232328;
  --ss-surface:#101014;
  --ss-placeholder:#55555E;
  --ss-scrim:rgba(6,6,9,.7);
  --ss-white:#FFFFFF;
  /* type families */
  --ss-font-serif:Newsreader,Georgia,serif;
  --ss-font-sans:Inter,-apple-system,"Segoe UI",Helvetica,sans-serif;
  /* type sizes */
  --ss-text-h1:clamp(2.1rem,6.5vw,3.4rem);
  --ss-text-h2:1.45rem;
  --ss-text-code:2rem;
  --ss-text-mark:1.25rem;
  --ss-text-body:15px;
  --ss-text-btn:.92rem;
  --ss-text-signin:.9rem;
  --ss-text-tab:.85rem;
  --ss-text-terms:.85rem;
  --ss-text-promise:.82rem;
  --ss-text-small:.8rem;
  --ss-text-caption:.72rem;
  /* type details */
  --ss-leading-body:1.6;
  --ss-leading-h1:1.12;
  --ss-leading-sheet:1.25;
  --ss-track-code:.12em;
  --ss-weight-medium:500;
  --ss-weight-semibold:600;
  /* radius */
  --ss-radius-s:4px;
  --ss-radius-m:6px;
  --ss-radius-l:12px;
  /* spacing */
  --ss-space-1:.4rem;
  --ss-space-2:.8rem;
  --ss-space-3:1.25rem;
  --ss-space-4:2.4rem;
  --ss-space-5:4rem;
  --ss-space-6:6rem;
  --ss-gutter:1.25rem;
  --ss-container:68rem;
  --ss-hit:44px;
}
/* Claude Design StockStudio FINAL — bar + suggestion box + gate, scoped for the live page (tank 2026-08-30) */
.ssd .hero h1{font-family:var(--ss-font-serif);font-weight:400;letter-spacing:-.01em;font-size:var(--ss-text-h1);line-height:var(--ss-leading-h1);max-width:22ch;text-wrap:pretty}
.ssd .hero .sub{color:var(--ss-dim);margin-top:1rem;max-width:34rem;text-wrap:pretty}
.ssd label{display:block;color:var(--ss-dim);font-size:var(--ss-text-caption);letter-spacing:.02em;margin-bottom:var(--ss-space-1)}
.ssd textarea, .ssd input{width:100%;font:inherit;color:var(--ss-ink);background:transparent;border:1px solid var(--ss-hair);border-radius:var(--ss-radius-m);padding:.8rem 1rem;outline:none}
.ssd textarea{min-height:6.5rem;resize:vertical;line-height:1.55}
.ssd textarea:focus, .ssd input:focus{border-color:var(--ss-dim)}
.ssd .frow{display:grid;gap:.9rem;margin-top:1.1rem;grid-template-columns:1fr}
.ssd .send{display:inline-flex;align-items:center;justify-content:center;background:var(--ss-ink);color:var(--ss-bg);font-weight:var(--ss-weight-semibold);font-size:var(--ss-text-btn);border-radius:var(--ss-radius-m);padding:.8rem 2.2rem;min-height:var(--ss-hit);border:0;cursor:pointer}
.ssd .send:hover{background:var(--ss-white)}
.ssd .saved{color:var(--ss-dim);font-size:var(--ss-text-caption);margin-top:.45rem}
.ssd .promise{color:var(--ss-dim);font-size:var(--ss-text-promise);line-height:var(--ss-leading-body);margin-top:1.3rem;max-width:36rem;text-wrap:pretty}
.gate{position:fixed;inset:0;z-index:50;display:none;background:var(--ss-scrim);align-items:flex-end;justify-content:center}
.gate.open{display:flex}
.sheet{background:var(--ss-surface);border:1px solid var(--ss-hair);width:100%;max-width:26rem;padding:1.8rem 1.6rem 1.6rem;border-radius:var(--ss-radius-l) var(--ss-radius-l) 0 0}
.sheet h2{font-family:var(--ss-font-serif);font-weight:400;font-size:var(--ss-text-h2);line-height:var(--ss-leading-sheet)}
.sheet .terms{color:var(--ss-dim);font-size:var(--ss-text-terms);line-height:var(--ss-leading-body);margin-top:.7rem}
.sheet .draft{border:1px solid var(--ss-hair);border-radius:var(--ss-radius-m);padding:.65rem .9rem;margin-top:1.1rem;color:var(--ss-dim);font-size:var(--ss-text-small);line-height:1.5}
.sheet .draft b{display:block;color:var(--ss-ink);font-weight:400;font-style:italic;font-family:var(--ss-font-serif)}
.sheet .signin{display:grid;gap:.55rem;margin-top:1.2rem}
.sheet .signin a{display:flex;align-items:center;justify-content:center;border:1px solid var(--ss-hair);border-radius:var(--ss-radius-m);min-height:var(--ss-hit);font-size:var(--ss-text-signin)}
.sheet .signin a:hover{border-color:var(--ss-dim)}
.sheet .dismiss{display:block;text-align:center;color:var(--ss-dim);font-size:var(--ss-text-small);margin-top:1rem}
.code{font-family:var(--ss-font-serif);font-size:var(--ss-text-code);letter-spacing:var(--ss-track-code);margin:1.1rem 0 .9rem}
.ssd-bar{display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:1.4rem var(--ss-gutter) 1rem;text-align:center}
.ssd-bar .mark{font-family:var(--ss-font-serif);font-size:var(--ss-text-mark);letter-spacing:.01em;color:var(--ss-ink);text-decoration:none}
.ssd-bar span{color:var(--ss-dim);font-size:var(--ss-text-small)}
.ssd-fab{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:40;display:inline-flex;align-items:center;gap:.5rem;background:var(--ss-bg);color:var(--ss-ink);border:1px solid var(--ss-hair);border-radius:999px;padding:.7rem 1.1rem;font:var(--ss-text-btn) var(--ss-font-sans);cursor:pointer;min-height:var(--ss-hit)}
.ssd-fab:hover{border-color:var(--ss-dim)}
.ssd .sheet{max-width:34rem;text-align:center}
.ssd .sheet h2{margin:0 0 .4rem}
.ssd .sheet .sub{color:var(--ss-dim);margin:0 0 1rem}
.ssd .sheet form{text-align:left}
.ssd .sheet .send{width:100%}
@media(min-width:640px){.gate{align-items:center}.sheet{border-radius:var(--ss-radius-l)}}
@media(min-width:560px){.ssd .frow{grid-template-columns:1fr;align-items:end}}
/* header: not sticky, centered; our wordmark/tagline/count retired; chips restyled as the design's text tabs */
header{position:static!important;text-align:center!important;padding:0 0 .4rem!important;background:var(--ss-bg)!important}
header h1, header .sub, header .live{display:none!important}
header .bar{display:flex!important;flex-wrap:wrap!important;justify-content:center!important;gap:.4rem 1.2rem!important;margin:0 auto!important;padding:.55rem var(--ss-gutter)!important;max-width:var(--ss-container)!important;border-top:1px solid var(--ss-hair)}
header .bar .chip{background:none!important;border:0!important;border-bottom:1px solid transparent!important;border-radius:0!important;padding:.15rem 0!important;color:var(--ss-dim)!important;font:var(--ss-text-tab) var(--ss-font-sans)!important;white-space:nowrap}
header .bar .chip.on{color:var(--ss-ink)!important;border-bottom-color:var(--ss-ink)!important;background:none!important}
header .bar #q{background:transparent!important;border:1px solid var(--ss-hair)!important;border-radius:var(--ss-radius-m)!important;color:var(--ss-ink)!important;text-align:center;font:var(--ss-text-tab) var(--ss-font-sans)!important;padding:.45rem 1rem!important;width:min(100%,22rem)!important}
@media(max-width:600px){header .bar{flex-wrap:nowrap!important;overflow-x:auto!important;justify-content:flex-start!important;scrollbar-width:none}header .bar::-webkit-scrollbar{display:none}}