.cc{display:flex;flex-direction:column;gap:20px}.cc__grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:20px;align-items:start}.cc__inputs{gap:18px;padding:24px}.cc__line{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;align-items:start}.cc__mono{font-family:var(--font-mono)}.cc__quick{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:-8px;font-size:var(--text-xs);color:var(--fg-muted)}.cc__opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}.cc__note{font-size:var(--text-xs);color:var(--fg-muted);line-height:1.6}.cc__hint{font-size:11px;color:var(--fg-faint)}.cc__result{display:flex;flex-direction:column;gap:16px;min-width:0;position:sticky;top:80px}.cc__stale{font-size:var(--text-xs);color:var(--warning);margin-bottom:8px}.is-stale .ui-code{opacity:.55}.cc__empty{padding:24px 8px;text-align:center;color:var(--fg-muted)}.cc__warnings{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}.cc__warn{padding:10px 12px;border-radius:var(--radius);border:1px solid color-mix(in oklab,var(--warning) 35%,transparent);background:color-mix(in oklab,var(--warning) 8%,transparent);font-size:var(--text-sm);line-height:1.6;color:var(--fg-muted)}.cc__explain{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}.cc__explain li{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:12px;font-size:var(--text-sm);line-height:1.55}.cc__explain code{align-self:start;padding:2px 8px;border-radius:6px;background:var(--surface-2);font-family:var(--font-mono);font-size:12.5px;overflow-wrap:anywhere}.cc__explain span{color:var(--fg-muted)}@media (max-width:960px){.cc__grid{grid-template-columns:minmax(0,1fr)}.cc__result{position:static}}@media (max-width:520px){.cc__inputs{padding:18px}.cc__explain li,.cc__line,.cc__opts{grid-template-columns:minmax(0,1fr)}.cc__explain li{gap:4px}}