.ct{display:flex;flex-direction:column;gap:20px}.ct__grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:20px;align-items:start}.ct__inputs{gap:22px;padding:24px}.ct__colors{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px;align-items:start}.ct__colors>.ui-iconbtn,.ct__colors>button{margin-top:26px}.ct__h{font-size:var(--text-sm);font-weight:600;color:var(--fg-muted);margin:0 0 4px}.ct__hint,.ct__note{font-size:12px;line-height:1.6;color:var(--fg-faint);margin:0}.ct__fixes{display:flex;flex-direction:column;gap:10px}.ct__fix{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius)}.ct__fixTitle{flex:1 1 100%;font-size:12px;font-weight:600;color:var(--fg-muted)}.ct__chip{width:22px;height:22px;border-radius:6px;border:1px solid var(--line-strong)}.ct__code{font-family:var(--font-mono);font-size:var(--text-sm)}.ct__fixRatio{font-size:12px;color:var(--fg-muted);font-variant-numeric:tabular-nums;margin-inline-end:auto}.ct__fixNone{font-size:var(--text-sm);color:var(--fg-muted);line-height:1.5}.ct__result{display:flex;flex-direction:column;gap:16px;min-width:0}.ct__big{display:flex;align-items:baseline;gap:4px;font-variant-numeric:tabular-nums}.ct__ratio{font-size:clamp(48px,8vw,72px);font-weight:700;letter-spacing:-.03em;line-height:1}.ct__colon{font-size:24px;color:var(--fg-muted)}.ct__levels{display:flex;flex-direction:column;margin-top:8px}.ct__level{display:grid;grid-template-columns:minmax(0,1fr) auto 64px;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line);font-size:var(--text-sm)}.ct__levelNeed{color:var(--fg-faint);font-size:12px;font-variant-numeric:tabular-nums}.ct__pop{display:inline-flex;justify-content:flex-end;animation:ct-pop .36s cubic-bezier(.3,1.5,.5,1)}@keyframes ct-pop{0%{transform:scale(.6);opacity:.2}to{transform:scale(1);opacity:1}}@media (prefers-reduced-motion:reduce){.ct__pop{animation:none}}.ct__stage{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:28px;border-radius:var(--radius);border:1px solid var(--line)}.ct__sampleN{margin:0;font-size:16px;line-height:1.5}.ct__sampleL{margin:0;font-size:24px;font-weight:700;line-height:1.3}.ct__sampleBtn{display:inline-flex;padding:8px 16px;border:2px solid;border-radius:8px;font-weight:600;font-size:14px}.ct__stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}@media (max-width:960px){.ct__grid{grid-template-columns:minmax(0,1fr)}}@media (max-width:640px){.ct__colors{grid-template-columns:minmax(0,1fr)}.ct__colors>.ui-iconbtn,.ct__colors>button{margin-top:0;justify-self:start}.ct__level{grid-template-columns:minmax(0,1fr) 64px}.ct__levelNeed{display:none}}@media (pointer:coarse){.ct__fix .ui-btn{--h:44px}}