/* Composition & Light Planner (scoped to .cp-*; reuses the site's base style.css) */
.cp-hero { padding: 120px 0 28px; }
.cp-hero .lead { max-width: 720px; }
.cp-hero h1 { font-size: clamp(30px, 5vw, 52px); }
#cp-app { --cp-acc: #3550d6; --cp-acc-bg: #e6ebff; --cp-amb: #8a5a0b; --cp-amb-bg: #fbf0d9; --cp-line: #d9dbe0; --cp-mut: #5c6270; --cp-warn: #a83a22; --cp-warn-bg: #fbe9e4; padding-bottom: 96px; }
.cp-steps { display: flex; flex-direction: column; gap: 40px; }
.cp-sec { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cp-sec h2 { font-size: 20px; letter-spacing: 0; display: flex; align-items: center; gap: 12px; }
.cp-n { width: 28px; height: 28px; border-radius: 50%; background: #0f1115; color: #fff; display: inline-grid; place-items: center; font-size: 14px; font-weight: 700; flex: none; }
.cp-panel { background: #fff; border: 1px solid var(--cp-line); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cp-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cp-field label, .cp-chk { font-size: 13px; color: var(--cp-mut); font-weight: 600; }
.cp-field input, .cp-field select { width: 100%; min-width: 0; padding: 10px 12px; border: 1px solid var(--cp-line); border-radius: 8px; background: #f7f7f4; color: #0f1115; font: inherit; font-size: 15px; }
.cp-seg { display: inline-flex; border: 1px solid var(--cp-line); border-radius: 8px; overflow: hidden; align-self: flex-start; }
.cp-seg button { border: 0; background: transparent; padding: 8px 20px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; color: #0f1115; }
.cp-seg button[aria-pressed="true"] { background: #0f1115; color: #fff; }
.cp-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.cp-chip, .cp-prop { text-align: left; border: 1px solid var(--cp-line); background: #fff; border-radius: 10px; padding: 12px 14px; cursor: pointer; font: inherit; color: #0f1115; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cp-chip { font-size: 14px; font-weight: 700; }
.cp-chip small { font-weight: 400; color: var(--cp-mut); font-size: 12px; }
.cp-chip[aria-pressed="true"], .cp-prop[aria-pressed="true"] { border-color: var(--cp-acc); background: var(--cp-acc-bg); box-shadow: inset 0 0 0 1px var(--cp-acc); }
.cp-props { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.cp-prop { gap: 8px; font-size: 14px; }
.cp-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.cp-tag { font-size: 11px; font-weight: 700; padding: 3px 7px; border-radius: 4px; white-space: nowrap; }
.cp-tag.c { background: var(--cp-acc-bg); color: var(--cp-acc); }
.cp-tag.l { background: var(--cp-amb-bg); color: var(--cp-amb); }
.cp-why { color: var(--cp-mut); font-size: 13px; line-height: 1.6; }
.cp-stage { background: #000; border-radius: 8px; overflow: hidden; aspect-ratio: 16 / 9; }
.cp-stage canvas { display: block; width: 100%; height: 100%; }
.cp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.cp-btn { border: 1px solid var(--cp-line); background: #fff; color: #0f1115; border-radius: 8px; padding: 9px 16px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.cp-btn.sm { padding: 5px 12px; font-size: 13px; }
.cp-btn.pri { background: var(--cp-acc); border-color: var(--cp-acc); color: #fff; }
.cp-btn:disabled { opacity: .55; cursor: default; }
.cp-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.cp-warn { background: var(--cp-warn-bg); color: var(--cp-warn); border-radius: 8px; padding: 10px 12px; font-size: 13.5px; }
.cp-out { display: flex; flex-direction: column; gap: 6px; }
.cp-oh { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 700; color: var(--cp-mut); }
.cp-out textarea { width: 100%; resize: vertical; padding: 12px; border: 1px solid var(--cp-line); border-radius: 8px; background: #f7f7f4; color: #0f1115; font: 13px/1.7 ui-monospace, Menlo, Consolas, monospace; }
.cp-note, .cp-msg { margin: 0; font-size: 12.5px; color: var(--cp-mut); }
.cp-msg { min-height: 1.2em; }
.cp-hist { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.cp-hi { background: #fff; border: 1px solid var(--cp-line); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.cp-hi canvas { width: 100%; aspect-ratio: 16 / 9; display: block; background: #000; }
.cp-hm { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 3px; font-size: 13px; min-width: 0; align-items: flex-start; }
.cp-hm span { color: var(--cp-mut); overflow-wrap: anywhere; }
.cp-hm .cp-t { font-size: 12px; }
.cp-hm .cp-btn { margin-top: 6px; }
.cp-chk { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
#cp-app button:focus-visible, #cp-app input:focus-visible, #cp-app select:focus-visible, #cp-app textarea:focus-visible { outline: 2px solid var(--cp-acc); outline-offset: 2px; }
@media (max-width: 520px) { .cp-hero { padding-top: 100px; } .cp-panel { padding: 14px; } }
@media (prefers-reduced-motion: no-preference) { .cp-chip, .cp-prop, .cp-btn { transition: border-color .12s, background .12s; } }

.cp-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 46%); gap: 28px; align-items: start; }
.cp-left { display: flex; flex-direction: column; gap: 40px; min-width: 0; }
.cp-side { position: sticky; top: 84px; min-width: 0; z-index: 5; }
.cp-stage { position: relative; }
.cp-zoom { position: absolute; right: 8px; bottom: 8px; border: 0; border-radius: 6px; background: rgba(15,17,21,.72); color: #fff; font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 10px; cursor: pointer; }
.cp-zoom:hover { background: rgba(15,17,21,.9); }
.cp-modal { position: fixed; inset: 0; z-index: 1000; background: rgba(8,10,14,.88); display: grid; place-items: center; padding: 16px; }
.cp-modal[hidden] { display: none; }
.cp-mbox { position: relative; width: min(96vw, calc(92vh * 16 / 9)); display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.cp-mbox canvas { width: 100%; aspect-ratio: 16 / 9; display: block; background: #000; border-radius: 8px; }
.cp-btn[hidden], .cp-chk[hidden] { display: none; }
@media (max-width: 900px) {
  .cp-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .cp-side { order: -1; top: 60px; }
  .cp-side .cp-panel { padding: 10px; gap: 8px; box-shadow: 0 4px 14px rgba(0,0,0,.12); }
  .cp-side .cp-stage { width: min(100%, calc(32vh * 16 / 9)); margin: 0 auto; }
  .cp-side .cp-bar { gap: 6px 10px; }
  .cp-side .cp-btn { padding: 6px 10px; font-size: 13px; }
}
#cp-app *, #cp-app *::before, #cp-app *::after { box-sizing: border-box; }
.cp-field textarea { width: 100%; min-height: 110px; resize: vertical; padding: 10px 12px; border: 1px solid var(--cp-line); border-radius: 8px; background: #f7f7f4; color: #0f1115; font: inherit; font-size: 15px; line-height: 1.6; }