:root{
      --ink:#111; --bg:#f8f0de; --pill-bg:#ffdb4d;
      --pill-shadow:#111; --pill-outline:#111; --pill-min-w: 240px;
    }
    html,body{ background:var(--bg); color:var(--ink); overflow-x:hidden; }
    .section { max-width:1100px; margin:0 auto; padding:20px 12px; }
    .card { background:#fff; border:3px solid #111; border-radius:18px; box-shadow:0 6px 0 #111; padding:14px; }
    .form-row { margin:12px 0; }
    .input { width:100%; padding:10px 12px; border:2px solid #111; border-radius:10px; }
    .muted { color:#333; font-size:12px; }
    .error { color:#b00020; font-weight:700; margin-top:6px; }
    .btn-primary { background:#1c46b5; color:#fff; border:3px solid #111; border-radius:12px; padding:12px 16px; font-weight:800; box-shadow:0 4px 0 #111; cursor:pointer; }
    .description-box { display:grid; grid-template-columns:1fr auto; gap:16px; align-items:start; background:#fff; border:3px solid #111; border-radius:18px; box-shadow:0 6px 0 #111; padding:16px; margin-bottom:16px; }
    .description-box img { width:160px; height:auto; }

    /* ピル型ラジオ */
    .opt-group{ display:flex; flex-wrap:wrap; gap:14px; }
    .sr-radio{ position:absolute; inset:0; width:1px; height:1px; opacity:0; pointer-events:none; }
    .opt-pill{ display:flex; align-items:center; gap:12px; min-width:var(--pill-min-w); background:var(--pill-bg); border:4px solid var(--pill-outline); border-radius:9999px; padding:12px 18px; font-weight:800; box-shadow:0 4px 0 var(--pill-shadow); cursor:pointer; user-select:none; }
    .opt-dot{ width:18px; height:18px; border-radius:999px; background:#fff; border:3px solid var(--pill-outline); display:inline-block; }
    .sr-radio:checked + .opt-pill .opt-dot{ background: radial-gradient(circle at 50% 50%, var(--pill-outline) 0 60%, #fff0 61%); }
    .sr-radio:focus-visible + .opt-pill{ outline:4px solid #1c46b5; outline-offset:2px; }

    /* 区間UI */
    .range-ui { margin-top:10px; }
    .pillset { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
    .pill { background:#ffdb4d; border:2px solid #111; box-shadow:0 2px 0 #b98700; border-radius:999px; padding:6px 10px; font-weight:800; }
    .pill .v { font-variant-numeric: tabular-nums; }
    .row-sliders{ display:flex; flex-direction:column; gap:18px; margin:4px 0 10px; }
    #durRange{ margin-top:4px; }
    .timeline-wrap { margin:10px 0 4px; }
    .timeline { position:relative; height:8px; background:#ddd; border-radius:999px; }
    .selection { position:absolute; top:0; bottom:0; left:0; width:0; background:#1c46b5; border-radius:999px; }
    .ruler { font-size:12px; color:#333; margin-top:4px; }

    @media (max-width:640px){
      .row-sliders{ gap:24px; }
      #durRange{ margin-top:8px; }
      .opt-pill{ min-width:calc(var(--pill-min-w) - 20px); padding:12px 16px; }
    }

    <style>
  /* エディタの2カラム（PC）→ 1カラム（SP） */
  .editor-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) 340px; /* 左:動画 右:操作 */
    gap:16px;
    align-items:start;
    margin-top:10px;
  }
  @media (max-width: 768px){
    .editor-grid{ grid-template-columns:1fr; }
  }

  /* 動画プレビューの枠は元の高さを維持（なければ 360px） */
  :root{ --player-height: 360px; } /* 既に他所で指定があればそちらが優先 */
  .preview{
    position:relative;
    width:100%;
    height:var(--player-height, 360px);
    background:#000;
    border:2px solid #111;
    border-radius:12px;
    overflow:hidden;
  }

  /* 右カラム（スライダー＆ボタン） */
  .editor-controls .row-sliders{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin:8px 0 6px;
  }
  .editor-controls .row-sliders input[type="range"]{
    width:100%;
  }
  .editor-controls .btns{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
  }

  /* SP時：動画の下に開始/長さ/プレビュー/登録の順 */
  @media (max-width: 768px){
    .editor-controls .btns{ justify-content:flex-start; }
  }
</style>