/* SKEIN design system — single source of truth for all studio pages.
   Tokens match home.html (Fraunces + Inter, warm paper + clay). */
:root{
  --paper:#f6f1e9; --paper2:#efe8dc; --ink:#241f1b; --ink2:#4a423b;
  --muted:#6f6459; /* AA on paper (was #8a7f76 / #8c8073 ~3.2:1) */
  --line:#e2d8c8; --clay:#b8583c; --clay-d:#994325;
  --forest:#3a5142; --wheat:#d9b25f; --card:#fffdf9;
  --ok:#3a6b4f; --warn:#9a6b1f; --err:#a33a2a;
  --r:16px; --shadow:0 24px 60px -24px rgba(60,40,25,.35);
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,.serif{font-family:Fraunces,serif;font-weight:500;letter-spacing:-0.01em}
a{color:inherit;text-decoration:none}

/* ── shared studio header ── */
.sk-nav{position:sticky;top:0;z-index:40;backdrop-filter:blur(12px);background:rgba(246,241,233,.88);border-bottom:1px solid var(--line)}
.sk-nav-in{max-width:1400px;margin:0 auto;display:flex;align-items:center;gap:22px;height:56px;padding:0 20px}
.sk-brand{font-family:Fraunces,serif;font-weight:600;font-size:1.15rem;display:flex;align-items:center;gap:8px}
.sk-brand .dot{width:10px;height:10px;border-radius:50%;background:var(--clay);box-shadow:0 0 0 3px rgba(184,88,60,.18)}
.sk-links{display:flex;gap:18px;margin-left:auto;font-size:.86rem;color:var(--ink2)}
.sk-links a{padding:4px 2px;border-bottom:2px solid transparent}
.sk-links a:hover{color:var(--clay)}
.sk-links a.on{color:var(--clay);border-bottom-color:var(--clay)}
@media(max-width:760px){.sk-links{gap:12px;font-size:.78rem;overflow-x:auto}}

/* ── panels / fields / buttons (studio tools) ── */
.sk-panel{padding:16px 18px;overflow-y:auto;background:var(--card);border-right:1px solid var(--line)}
.sk-h2{font-family:Inter,sans-serif;font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin:18px 0 8px;border-bottom:1px solid var(--line);padding-bottom:5px}
.sk-h2:first-child{margin-top:0}
.sk-field{margin-bottom:10px}
.sk-field label{display:flex;justify-content:space-between;font-size:.8rem;margin-bottom:3px;color:var(--ink2)}
.sk-field label b{color:var(--clay)}
input[type=range]{width:100%;accent-color:var(--clay)}
.sk-btn{font-family:Inter,sans-serif;font-size:.8rem;font-weight:500;padding:8px 13px;border:1px solid var(--line);background:var(--card);border-radius:9px;cursor:pointer;color:var(--ink);transition:background .15s,transform .12s}
.sk-btn:hover{background:var(--paper2)}
.sk-btn:active{transform:scale(.98)}
.sk-btn.primary{background:var(--clay);color:#fff;border-color:transparent;font-weight:600;box-shadow:0 6px 16px -8px rgba(184,88,60,.7)}
.sk-btn.primary:hover{background:var(--clay-d)}
.sk-btn.on{background:var(--clay);color:#fff;border-color:var(--clay)}
.sk-btn:disabled{opacity:.5;cursor:default;transform:none}
.sk-input,textarea.sk-input{font-family:Inter,sans-serif;font-size:.86rem;padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);width:100%}
.sk-input:focus{outline:2px solid rgba(184,88,60,.35);border-color:var(--clay)}
.sk-hint{font-size:.7rem;color:var(--muted);line-height:1.5;margin-top:4px}

/* ── status / preflight notes ── */
.sk-note{font-size:.78rem;line-height:1.5;border-radius:10px;padding:9px 12px;margin:8px 0;border:1px solid}
.sk-note.ok{color:var(--ok);border-color:rgba(58,107,79,.35);background:rgba(58,107,79,.07)}
.sk-note.warn{color:var(--warn);border-color:rgba(154,107,31,.4);background:rgba(154,107,31,.07)}
.sk-note.err{color:var(--err);border-color:rgba(163,58,42,.4);background:rgba(163,58,42,.07)}

/* ── loading spinner for async AI jobs ── */
.sk-spin{display:inline-block;width:14px;height:14px;border:2px solid rgba(184,88,60,.3);border-top-color:var(--clay);border-radius:50%;animation:skspin .8s linear infinite;vertical-align:-2px}
@keyframes skspin{to{transform:rotate(360deg)}}

/* ── inline SVG icon sizing ── */
.sk-ic{width:14px;height:14px;vertical-align:-2px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ── print: hide chrome, show the artifact ── */
@media print{.sk-nav{display:none}}