:root{
  --primary:#F50000;
  --bg:#ffffff;
  --fg:#111111;
  --muted:#666;
  --card:#f7f7f7;
  --border:#e5e5e5;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#050505; --fg:#f0f0f0; --muted:#aaa; --card:#0f0f0f; --border:#222; }
}
[data-theme="dark"]{ --bg:#000000; --fg:#f5f5f5; --muted:#9a9a9a; --card:#0b0b0b; --border:#1a1a1a; }
[data-theme="light"]{ --bg:#ffffff; --fg:#111; --muted:#666; --card:#f7f7f7; --border:#e5e5e5; }

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;line-height:1.48}
a{color:var(--fg);text-decoration:none}
a.btn,button.btn,.btn{background:var(--primary);color:#fff;border-radius:10px;padding:.6rem .9rem;border:none;display:inline-flex;align-items:center;gap:.4rem;font-weight:700}
a.btn:hover,button.btn:hover{opacity:.9}

.app-header{position:sticky;top:0;background:var(--bg);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:.6rem 1rem;z-index:50}
.app-header .brand .logo{display:inline-block;width:16px;height:16px;background:var(--primary);border-radius:2px;margin-right:.4rem}
.app-header .nav{display:flex;gap:.8rem;align-items:center}
.app-main{padding:1rem;max-width:1100px;margin:0 auto}
.app-footer{border-top:1px solid var(--border);padding:1rem;color:var(--muted);display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem}

.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:1rem}
.grid{display:grid;gap:1rem}
.grid.cols-2{grid-template-columns:1fr 1fr}
.grid.cols-3{grid-template-columns:1fr 1fr 1fr}
@media (max-width:840px){.grid.cols-2,.grid.cols-3{grid-template-columns:1fr}}

.input, select, textarea{width:100%;padding:.7rem;border:1px solid var(--border);border-radius:12px;background:var(--bg);color:var(--fg)}
.input:focus, select:focus, textarea:focus{outline:2px solid var(--primary)}

/* Landing */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:1rem;align-items:center}
.hero h1{font-size:clamp(26px,4vw,46px);margin:.2rem 0}
.hero .catch{color:var(--muted);font-size:clamp(14px,2.2vw,18px)}
.hero .panel{background:var(--card);padding:1rem;border-radius:14px;border:1px solid var(--border)}
@media (max-width:900px){.hero{grid-template-columns:1fr}}

/* Editor */
.editor-shell{display:grid;grid-template-columns:1fr 360px;gap:1rem}
@media (max-width:1000px){.editor-shell{grid-template-columns:1fr}}
.preview{background:#000;border-radius:12px;overflow:hidden;position:relative}
.preview video{width:100%;display:block;background:#000}
.timeline{height:56px;background:var(--card);border:1px solid var(--border);border-radius:12px;display:flex;align-items:center;padding:.5rem;gap:.6rem;overflow-x:auto}
.timeline .mark{height:36px;min-width:80px;background:#1b1b1b;color:#fff;border-radius:8px;padding:.3rem .6rem;display:flex;align-items:center;gap:.3rem}
.controls .row{display:flex;gap:.6rem;align-items:center;margin:.5rem 0;flex-wrap:wrap}
.range{display:flex;gap:.4rem;align-items:center}
.small{font-size:.88rem;color:var(--muted)}
.kbd{border:1px solid var(--border);border-radius:6px;padding:.08rem .33rem;background:var(--card);}

/* Dev */
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--border);padding:.6rem;text-align:left;font-size:.95rem}
.table th{color:var(--muted)}

/* Floating bottom bar for mobile */
.bottom-bar{position:sticky;bottom:0;background:var(--bg);border-top:1px solid var(--border);display:flex;gap:.6rem;padding:.6rem;z-index:40}
.bottom-bar .btn{flex:1}