* {box-sizing: border-box;margin:0;padding:0;}
body {font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;line-height:1.6;color:#333;background:#fafafa min-width:320px}
header {background:#1a1a1a;color:#fff;padding:1rem 0;box-shadow:0 2px 4px rgba(0,0,0,0.1)}
header .container {display:flex;justify-content:space-between;align-items:center}
header nav a {color:#fff;margin-left:1.5rem;text-decoration:none;font-size:0.9rem;transition:color 0.2s}
header nav a:hover {color:#ff6b6b}
.hero {background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;padding:2rem 0 1.5rem}
.hero h2 {font-size:2rem;margin-bottom:0.5rem}
.hero p {opacity:0.9;margin-bottom:1.5rem}
.preset-buttons {display:flex;gap:0.5rem;flex-wrap:wrap}
.preset-btn {background:rgba(255,255,255,0.2);border:none;padding:0.5rem 1rem;border-radius:4px;color:#fff;cursor:pointer;transition:background 0.2s}
.preset-btn:hover {background:rgba(255,255,255,0.3)}
.preset-btn.active {background:#fff;color:#333;box-shadow:0 0 0 2px #fff}
.preset-btn.custom {background:rgba(255,255,255,0.4)}
.scheduler {padding:1.5rem 0}
.scheduler .controls {display:flex;gap:1rem;margin-bottom:1rem;align-items:center}
.add-button {background:#ff6b6b;color:#fff;border:none;width:40px;height:40px;border-radius:50%;font-size:1.5rem;cursor:pointer;transition:background 0.2s}
.add-button:hover {background:#ff5252}
.search-area {display:flex;gap:0.5rem;flex:1}
.search-area input {flex:1;padding:0.75rem;border:1px solid #ddd;border-radius:4px 0 0 4px;font-size:1rem}
.search-area button {padding:0.75rem 1rem;background:#667eea;color:#fff;border:none;border-radius:0 4px 4px 0;cursor:pointer;transition:background 0.2s}
.search-area button:hover {background:#5a6fd6}
.timeline {background:#fff;border:1px solid #e0e0e0;border-radius:8px;padding:1rem;min-height:200px;margin-bottom:1rem;transition:all 0.3s}
.block-placeholder {text-align:center;color:#999;padding:2rem;text-align:center}
.block-placeholder p {font-size:1.1rem}
.documentary-block {background:linear-gradient(135deg,#f093fb 0%,#f5576c 100%);color:#fff;padding:1rem;border-radius:6px;margin-bottom:0.75rem;cursor:move;position:relative;transition:transform 0.2s}
.documentary-block:hover {transform:translateY(-2px)}
.documentary-block .title {font-weight:bold;margin-bottom:0.25rem}
.documentary-block .topic {font-size:0.85rem;opacity:0.9}
.documentary-block .duration {font-size:0.8rem;opacity:0.8}
.documentary-block .remove {position:absolute;top:5px;right:5px;background:rgba(255,255,255,0.2);border:none;width:20px;height:20px;border-radius:50%;font-size:0.8rem;cursor:pointer;opacity:0;transition:opacity 0.2s}
.documentary-block:hover .remove {opacity:1}
.documentary-block .remove:hover {background:rgba(255,255,255,0.3)}
.break-reminder {display:flex;align-items:center;background:#fff3cd;border:1px solid #ffeeba;border-radius:6px;padding:1rem;margin:1rem 0;gap:1rem}
.break-icon {font-size:1.5rem}
.break-text {font-weight:bold;color:#856404}
.stats {background:#fff;padding:1.5rem 0;border-top:1px solid #e0e0e0}
.stat-box {text-align:center;padding:1rem;flex:1;min-width:120px}
.stat-value {font-size:1.8rem;font-weight:bold;color:#333}
.stat-label {font-size:0.85rem;color:#666;margin-top:0.25rem}
.actions {padding:1.5rem 0;background:#f8f9fa}
.action-btn {padding:0.75rem 1.5rem;border:none;border-radius:4px;cursor:pointer;font-size:1rem;margin-right:0.5rem;transition:transform 0.2s}
.action-btn:hover {transform:scale(0.97)}
.action-btn:active {transform:scale(0.95)}
.primary {background:#667eea;color:#fff}
.secondary {background:#e0e0e0;color:#333}
.danger {background:#ff6b6b;color:#fff}
.examples {padding:1.5rem 0;background:#fff}
.examples h3 {margin-bottom:1rem;color:#333}
.example-cards {display:flex;gap:1rem;flex-wrap:wrap}
.example-card {background:#f8f9fa;border:1px solid #e0e0e0;border-radius:8px;padding:1rem;flex:1;min-width:250px}
.example-card h4 {font-size:1rem;margin-bottom:0.5rem;color:#333}
.example-card ul {font-size:0.9rem;line-height:1.4}
.tips, .faq {padding:1.5rem 0}
.tips h3, .faq h3 {margin-bottom:1rem;color:#333;font-size:1.2rem}
.tips p, .faq p {margin-bottom:0.75rem;color:#555}
.faq-item {margin-bottom:1rem}
.faq-item h4 {font-size:1rem;margin-bottom:0.25rem;color:#333}
.faq-item p {font-size:0.95rem;color:#666}
@media (max-width: 600px) {
header .container {flex-direction:column;gap:1rem;text-align:center}
header nav {display:flex;gap:1rem}
.preset-buttons {justify-content:center}
.timeline {min-height:150px}
.example-cards {flex-direction:column}
.example-card {min-width:100%
}
}
</style>


/* Factory-injected deployment helpers. The AI owns the site design above this block. */
.ad-unit {
  width: min(100%, 720px);
  min-height: 120px;
  margin: 24px auto;
  display: block;
}

.legal-page {
  width: min(900px, calc(100% - 32px));
  margin: 40px auto;
}

.factory-fallback-nav {
  width: min(900px, calc(100% - 32px));
  margin: 24px auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  font-size: 0.95rem;
}

.factory-fallback-nav a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}