.page { padding: 40px 20px; max-width: 1200px; margin: 0 auto; }
.page h1 { font-size: 26px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.page .subtitle { color: #888; margin-bottom: 24px; font-size: 14px; }

label {
  display: block; font-size: 11px; font-weight: 600; color: #888;
  margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px;
}

.card {
  background: #141414; border: 1px solid #262626;
  border-radius: 12px; padding: 20px; margin-bottom: 16px; position: relative;
}
.sec-title { font-size: 13px; color: #ccc; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 14px; font-weight: 700; }
.sec-hint { font-size: 11px; color: #666; font-weight: 500; letter-spacing: 0; text-transform: none; margin-left: 8px; }

.main-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 16px; }

.preview-stage {
  width: 100%; height: 300px;
  background: #0d0d0d; border: 1px solid #2a2a2a; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.anim-el {
  width: 60px; height: 60px; background: #ff4444; border-radius: 8px;
}

.preview-controls {
  display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap;
}
.inline-slider {
  display: inline-flex; align-items: center; gap: 8px; color: #bbb; font-size: 12px;
  text-transform: none; letter-spacing: 0; font-weight: 500; margin: 0;
}
.inline-slider input[type="range"] { accent-color: #ff4444; width: 120px; }

.presets-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.preset-btn {
  padding: 6px 12px; background: #0d0d0d; border: 1px solid #2a2a2a;
  color: #bbb; border-radius: 999px; font-size: 12px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.preset-btn:hover { border-color: #ff4444; color: #fff; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.inp { display: flex; flex-direction: column; }
.inp input, .inp select {
  background: #0d0d0d; border: 1px solid #2a2a2a; border-radius: 6px;
  color: #e1e1e1; padding: 8px 10px; font-size: 13px; outline: none;
  font-family: inherit; transition: border-color 0.15s;
}
.inp input:focus, .inp select:focus { border-color: #ff4444; }

.timeline {
  position: relative; margin-bottom: 14px;
}
.timeline-track {
  position: relative; height: 44px; background: #0a0a0a;
  border: 1px solid #2a2a2a; border-radius: 8px; cursor: pointer;
}
.timeline-labels {
  display: flex; justify-content: space-between; margin-top: 6px;
  color: #666; font-size: 11px; font-family: 'SF Mono', monospace;
}
.kf {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 14px; height: 28px; background: #ff4444; border-radius: 4px;
  cursor: grab; border: 2px solid #141414; box-shadow: 0 0 0 1px #ff4444;
}
.kf.active { background: #ffb3b3; box-shadow: 0 0 0 2px #ff4444; }
.kf.dragging { cursor: grabbing; }
.kf .kf-pct {
  position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
  background: #1a1a1a; color: #fff; font-size: 10px; padding: 2px 5px;
  border-radius: 3px; font-family: 'SF Mono', monospace; pointer-events: none;
  border: 1px solid #333;
}

.frame-props {
  background: #0d0d0d; border: 1px solid #2a2a2a; border-radius: 10px;
  padding: 14px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.frame-props .inp input { padding: 6px 8px; font-size: 12px; }
.frame-props .inp input[type="color"] { height: 30px; padding: 2px; }
.frame-props h4 {
  grid-column: 1 / -1; color: #ccc; font-size: 12px; font-weight: 600;
  display: flex; align-items: center; justify-content: space-between;
}
.frame-props h4 button {
  background: transparent; border: 1px solid #333; color: #888; border-radius: 4px;
  padding: 3px 8px; font-size: 11px; cursor: pointer; font-family: inherit;
}
.frame-props h4 button:hover { border-color: #f87171; color: #f87171; }

.code-block {
  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace; font-size: 13px;
  color: #e1e1e1; line-height: 1.6; white-space: pre-wrap; word-break: break-all;
  margin: 0;
}
.copy-code { position: absolute; top: 16px; right: 16px; }
.small-btn {
  padding: 5px 12px; background: transparent; border: 1px solid #333;
  color: #aaa; border-radius: 4px; font-size: 12px; cursor: pointer;
  transition: all 0.15s; font-family: inherit;
}
.small-btn:hover { border-color: #ff4444; color: #fff; }
.small-btn.copied { color: #4ade80; border-color: #4ade80; }

@media (max-width: 800px) {
  .main-grid { grid-template-columns: 1fr; }
  .frame-props { grid-template-columns: 1fr 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
}