.CssKeyframesGeneratorClient-module__05c87q__wrap{gap:1.75rem}.CssKeyframesGeneratorClient-module__05c87q__header{background:var(--surface);border:1px solid var(--border);border-radius:calc(var(--radius) + 4px);box-shadow:var(--shadow-1);flex-direction:column;gap:.75rem;padding:1.5rem;display:flex}.CssKeyframesGeneratorClient-module__05c87q__layout{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:start;gap:1.75rem;display:grid}.CssKeyframesGeneratorClient-module__05c87q__panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-1);flex-direction:column;gap:1.25rem;padding:1.5rem;display:flex}.CssKeyframesGeneratorClient-module__05c87q__previewPanel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-2);flex-direction:column;gap:1.75rem;padding:1.75rem 1.5rem;display:flex}.CssKeyframesGeneratorClient-module__05c87q__panelHeader{justify-content:space-between;align-items:flex-start;gap:1rem;display:flex}.CssKeyframesGeneratorClient-module__05c87q__panelHeader h3{margin-bottom:.35rem}.CssKeyframesGeneratorClient-module__05c87q__timelineTrack{border-radius:calc(var(--radius) - 4px);border:1px solid var(--border);background:color-mix(in oklab,var(--surface-2)85%,transparent);min-height:94px;padding:1.5rem 1rem 1.75rem;position:relative}.CssKeyframesGeneratorClient-module__05c87q__timelineLine{background:color-mix(in srgb,var(--muted)25%,transparent);border-radius:999px;height:4px;position:absolute;top:calc(50% + .25rem);left:16px;right:16px}.CssKeyframesGeneratorClient-module__05c87q__markerRail{height:0;position:absolute;top:calc(50% + .25rem);left:16px;right:16px}.CssKeyframesGeneratorClient-module__05c87q__marker{background:var(--chip);color:inherit;cursor:pointer;border:none;border-radius:999px;align-items:center;gap:.35rem;padding:.35rem .75rem;font-size:.8rem;transition:background .2s,box-shadow .2s,transform .2s;display:inline-flex;position:absolute;top:0;transform:translate(-50%,-50%);box-shadow:0 6px 16px rgba(26,26,26,.08)}.CssKeyframesGeneratorClient-module__05c87q__marker:hover{background:var(--chip-hover);transform:translate(-50%,-56%)}.CssKeyframesGeneratorClient-module__05c87q__markerActive{background:var(--brand);color:#fff;box-shadow:0 10px 24px rgba(220,56,45,.25)}.CssKeyframesGeneratorClient-module__05c87q__addRow{flex-direction:column;gap:.75rem;display:flex}.CssKeyframesGeneratorClient-module__05c87q__addControls{grid-template-columns:minmax(0,1fr) 90px auto;align-items:center;gap:.75rem;display:grid}.CssKeyframesGeneratorClient-module__05c87q__addControls input[type=range]{accent-color:var(--brand)}.CssKeyframesGeneratorClient-module__05c87q__grid,.CssKeyframesGeneratorClient-module__05c87q__settingsGrid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;display:grid}.CssKeyframesGeneratorClient-module__05c87q__field{flex-direction:column;gap:.4rem;font-size:.92rem;display:flex}.CssKeyframesGeneratorClient-module__05c87q__field input,.CssKeyframesGeneratorClient-module__05c87q__field select{border-radius:var(--radius-sm);border:1px solid var(--border);background:color-mix(in oklab,var(--surface)98%,transparent);color:inherit;padding:.55rem .65rem}.CssKeyframesGeneratorClient-module__05c87q__field input:focus,.CssKeyframesGeneratorClient-module__05c87q__field select:focus{outline:2px solid color-mix(in srgb,var(--brand)30%,transparent);outline-offset:2px}.CssKeyframesGeneratorClient-module__05c87q__previewHeader{justify-content:space-between;align-items:center;gap:.75rem;display:flex}.CssKeyframesGeneratorClient-module__05c87q__previewStage{background:radial-gradient(circle at top left,rgba(220,56,45,.08),transparent 65%),linear-gradient(135deg,color-mix(in srgb,var(--brand)14%,transparent)0%,transparent 100%);border:1px solid var(--border);border-radius:calc(var(--radius) + 6px);justify-content:center;align-items:center;min-height:240px;padding:2.75rem 1.5rem;display:flex;position:relative;overflow:hidden}.CssKeyframesGeneratorClient-module__05c87q__previewBox{background:linear-gradient(135deg,var(--brand)0%,color-mix(in srgb,var(--brand)30%,var(--accent)70%)100%);color:#fff;border-radius:32px;justify-content:center;align-items:center;width:140px;height:140px;font-weight:600;display:flex;box-shadow:0 24px 48px rgba(220,56,45,.25)}.CssKeyframesGeneratorClient-module__05c87q__previewBox span{pointer-events:none;text-transform:uppercase;letter-spacing:.12em;font-size:.85rem}.CssKeyframesGeneratorClient-module__05c87q__codeBlock{background:color-mix(in oklab,var(--surface-2)90%,transparent);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;gap:.75rem;padding:1rem;display:flex}.CssKeyframesGeneratorClient-module__05c87q__codeBlock header{color:var(--muted);justify-content:space-between;align-items:center;gap:1rem;font-size:.95rem;display:flex}.CssKeyframesGeneratorClient-module__05c87q__codeBlock pre{border-radius:calc(var(--radius-sm) + 2px);background:rgba(0,0,0,.04);max-height:320px;padding:1rem;font-family:JetBrains Mono,Fira Code,monospace;font-size:.85rem;line-height:1.5;overflow:auto}.CssKeyframesGeneratorClient-module__05c87q__summary{flex-direction:column;gap:.85rem;display:flex}.CssKeyframesGeneratorClient-module__05c87q__summary h4{font-size:1rem}.CssKeyframesGeneratorClient-module__05c87q__summary ul{flex-direction:column;gap:.5rem;margin:0;padding:0;list-style:none;display:flex}.CssKeyframesGeneratorClient-module__05c87q__summary li{background:color-mix(in oklab,var(--surface-2)80%,transparent);border:1px solid var(--border-weak);border-radius:var(--radius-sm);flex-direction:column;gap:.2rem;padding:.6rem .75rem;font-size:.9rem;display:flex}.CssKeyframesGeneratorClient-module__05c87q__summary li strong{font-size:.9rem}.CssKeyframesGeneratorClient-module__05c87q__primaryBtn,.CssKeyframesGeneratorClient-module__05c87q__secondaryBtn,.CssKeyframesGeneratorClient-module__05c87q__dangerBtn{cursor:pointer;border:1px solid transparent;border-radius:999px;padding:.45rem 1.1rem;font-size:.9rem;font-weight:600;transition:transform .2s,box-shadow .2s,background .2s}.CssKeyframesGeneratorClient-module__05c87q__primaryBtn{background:var(--brand);color:#fff;box-shadow:0 10px 20px rgba(220,56,45,.25)}.CssKeyframesGeneratorClient-module__05c87q__primaryBtn:hover{transform:translateY(-1px);box-shadow:0 14px 28px rgba(220,56,45,.28)}.CssKeyframesGeneratorClient-module__05c87q__secondaryBtn{background:var(--chip);color:inherit;border:1px solid var(--border)}.CssKeyframesGeneratorClient-module__05c87q__secondaryBtn:hover{background:var(--chip-hover);transform:translateY(-1px)}.CssKeyframesGeneratorClient-module__05c87q__dangerBtn{background:color-mix(in srgb,var(--brand)90%,black 10%);color:#fff;box-shadow:0 10px 24px rgba(220,56,45,.25)}.CssKeyframesGeneratorClient-module__05c87q__dangerBtn:hover{transform:translateY(-1px)}@media (max-width:1100px){.CssKeyframesGeneratorClient-module__05c87q__layout{grid-template-columns:minmax(0,1fr)}.CssKeyframesGeneratorClient-module__05c87q__previewPanel{order:-1}}@media (max-width:640px){.CssKeyframesGeneratorClient-module__05c87q__header,.CssKeyframesGeneratorClient-module__05c87q__panel,.CssKeyframesGeneratorClient-module__05c87q__previewPanel{padding:1.25rem}.CssKeyframesGeneratorClient-module__05c87q__addControls{grid-template-columns:minmax(0,1fr)}.CssKeyframesGeneratorClient-module__05c87q__addControls input[type=number],.CssKeyframesGeneratorClient-module__05c87q__primaryBtn,.CssKeyframesGeneratorClient-module__05c87q__secondaryBtn,.CssKeyframesGeneratorClient-module__05c87q__dangerBtn{width:100%}.CssKeyframesGeneratorClient-module__05c87q__marker span{display:none}.CssKeyframesGeneratorClient-module__05c87q__timelineTrack{min-height:80px}}