.cs-ip{gap:var(--cs-space-6);flex-direction:column;display:flex}.cs-ip__drop{align-items:center;gap:var(--cs-space-3);padding:var(--cs-space-12) var(--cs-space-5);border:2px dashed var(--cs-border-strong);border-radius:var(--cs-radius-2xl);background:var(--cs-card);text-align:center;transition:border-color var(--cs-duration-fast) var(--cs-ease), background-color var(--cs-duration-fast) var(--cs-ease);flex-direction:column;display:flex}.cs-ip__drop.is-compact{padding:var(--cs-space-5);flex-flow:wrap;justify-content:center}.cs-ip__drop.is-dragging{border-color:var(--cs-accent);background:var(--cs-fill)}.cs-ip__choose{cursor:pointer}.cs-ip__hint{font-size:var(--cs-text-sm);color:var(--cs-text-muted)}.cs-ip__example{min-height:var(--cs-touch-target);padding-inline:var(--cs-space-3);color:var(--cs-accent-soft);font-size:var(--cs-text-sm);cursor:pointer;background:0 0;border:none;text-decoration:underline}.cs-ip__error{padding:var(--cs-space-4);border:1px solid var(--cs-border-strong);border-radius:var(--cs-radius-md);background:var(--cs-fill-subtle);color:var(--cs-text-strong);font-size:var(--cs-text-sm)}.cs-ip__result{gap:var(--cs-space-6);display:grid}@media (width>=900px){.cs-ip__result{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}}.cs-ip__stage{gap:var(--cs-space-3);flex-direction:column;display:flex}.cs-ip__canvas{border:1px solid var(--cs-border);border-radius:var(--cs-radius-xl);cursor:crosshair;width:100%;height:auto}.cs-ip__filename{font-size:var(--cs-text-xs);color:var(--cs-text-faint)}.cs-ip__picked{justify-content:space-between;align-items:center;gap:var(--cs-space-3);min-height:var(--cs-touch-target);padding:var(--cs-space-3) var(--cs-space-4);border:1px solid var(--cs-border-strong);border-radius:var(--cs-radius-md);cursor:pointer;font-size:.9375rem;display:flex}.cs-ip__pickedhint{font-size:var(--cs-text-xs);opacity:.8}.cs-ip__panel{gap:var(--cs-space-5);flex-direction:column;display:flex}.cs-ip__countrow{gap:var(--cs-space-1);flex-direction:column;display:flex}.cs-ip__label{font-size:var(--cs-text-sm);color:var(--cs-text-muted);justify-content:space-between;display:flex}.cs-ip__strip{border-radius:var(--cs-radius-md);grid-template-columns:repeat(auto-fit,minmax(48px,1fr));gap:2px;margin:0;padding:0;list-style:none;display:grid;overflow:hidden}.cs-ip__stripchip{width:100%;min-height:54px;padding:var(--cs-space-2) .15rem;letter-spacing:.02em;cursor:pointer;transition:transform var(--cs-duration-fast) var(--cs-ease);border:none;justify-content:center;align-items:flex-end;font-size:.625rem;display:flex}.cs-ip__stripchip:hover{transform:translateY(-2px)}.cs-ip__stripchip span{opacity:.85}.cs-ip__roles{gap:var(--cs-space-3);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.cs-ip__roles li{gap:var(--cs-space-3);grid-template-columns:7.5rem minmax(0,1fr);align-items:stretch;display:grid}.cs-ip__swatch{min-height:60px;padding:var(--cs-space-2);border:1px solid var(--cs-border-strong);border-radius:var(--cs-radius-md);font-size:var(--cs-text-xs);letter-spacing:.03em;cursor:pointer;transition:transform var(--cs-duration-fast) var(--cs-ease);justify-content:center;align-items:center;display:flex}.cs-ip__swatch:hover{transform:translateY(-2px)}.cs-ip__roleinfo{flex-direction:column;justify-content:center;gap:.15rem;display:flex}.cs-ip__rolename{align-items:baseline;gap:var(--cs-space-2);color:var(--cs-text-strong);flex-wrap:wrap;font-size:.9375rem;font-weight:600;display:flex}.cs-ip__tag{border:1px solid var(--cs-border-strong);border-radius:var(--cs-radius-pill);font-size:var(--cs-text-xs);color:var(--cs-text-muted);padding:.1rem .45rem;font-weight:500}.cs-ip__share{font-family:var(--cs-font-mono);font-size:var(--cs-text-xs);color:var(--cs-text-faint)}.cs-ip__reason{font-size:var(--cs-text-sm);line-height:var(--cs-leading-normal);color:var(--cs-text-secondary)}.cs-ip__export{gap:var(--cs-space-3);padding-top:var(--cs-space-5);border-top:1px solid var(--cs-border);flex-direction:column;display:flex}.cs-ip__formats{gap:var(--cs-space-2);flex-wrap:wrap;display:flex}.cs-ip__format{min-height:var(--cs-touch-target);padding:var(--cs-space-2) var(--cs-space-3);border:1px solid var(--cs-border);border-radius:var(--cs-radius-md);background:var(--cs-fill-subtle);color:var(--cs-text-secondary);font-size:var(--cs-text-sm);cursor:pointer;transition:border-color var(--cs-duration-fast) var(--cs-ease), color var(--cs-duration-fast) var(--cs-ease);flex-direction:column;align-items:flex-start;gap:.1rem;display:flex}.cs-ip__format span{font-size:var(--cs-text-xs);color:var(--cs-text-faint)}.cs-ip__format:hover,.cs-ip__format.is-active{border-color:var(--cs-border-hover);color:var(--cs-text-strong)}.cs-ip__exportactions{gap:var(--cs-space-2);flex-wrap:wrap;display:flex}.cs-ip__code{max-height:15rem;padding:var(--cs-space-4);background:var(--cs-inset);border:1px solid var(--cs-border);border-radius:var(--cs-radius-md);font-size:var(--cs-text-sm);color:var(--cs-text-secondary);white-space:pre;margin:0;line-height:1.6;overflow:auto}.cs-toolhead[data-astro-cid-tgfseze5]{gap:var(--cs-space-4);padding-block:var(--cs-space-8);flex-direction:column;display:flex}.cs-toolhead[data-astro-cid-tgfseze5] h1[data-astro-cid-tgfseze5]{font-size:var(--cs-text-xl);letter-spacing:var(--cs-tracking-tight)}@media (width>=768px){.cs-toolhead[data-astro-cid-tgfseze5] h1[data-astro-cid-tgfseze5]{font-size:var(--cs-text-2xl)}}.cs-answer[data-astro-cid-tgfseze5]{font-size:var(--cs-text-md);line-height:var(--cs-leading-relaxed);color:var(--cs-text-secondary)}.cs-howgrid[data-astro-cid-tgfseze5]{gap:var(--cs-space-4);display:grid}@media (width>=760px){.cs-howgrid[data-astro-cid-tgfseze5]{grid-template-columns:repeat(2,1fr)}}.cs-howgrid[data-astro-cid-tgfseze5] article[data-astro-cid-tgfseze5]{padding:var(--cs-space-5);background:var(--cs-inset);border:1px solid var(--cs-border);border-radius:var(--cs-radius-lg)}.cs-howgrid[data-astro-cid-tgfseze5] h3[data-astro-cid-tgfseze5]{font-size:var(--cs-text-base);margin-bottom:var(--cs-space-3)}.cs-howgrid[data-astro-cid-tgfseze5] p[data-astro-cid-tgfseze5]{color:var(--cs-text-secondary);line-height:var(--cs-leading-relaxed)}