/* Edit section scenes: Easing, Checklist, Safe Zones. Auto SFX uses the tile styles in library.css. */

/* 06 Easing */
.ez-top{display:grid;grid-template-columns:minmax(0,290px) 1fr;gap:14px;align-items:start}
.ez-graph{width:100%;height:auto;background:var(--bg-input);border:1px solid var(--bd);border-radius:6px;overflow:visible}
.ez-grid{stroke:#2e2e36;stroke-width:1;fill:none}
.ez-curve{stroke:var(--acc-h);stroke-width:3;fill:none;stroke-linecap:round;transition:d .6s var(--ease)}
.ez-chips{display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.ez-track{position:relative;height:34px;border-radius:6px;background:var(--bg-input);border:1px solid var(--bd)}
.ez-sq{position:absolute;left:4px;top:5px;width:24px;height:22px;border-radius:5px;background:var(--acc);
       box-shadow:0 0 0 3px var(--acc-sub)}
.ez-kf{border-radius:6px;border:1px solid var(--bd)}
.ez-key{position:absolute;top:50%;width:7px;height:7px;background:var(--t2);transform:translate(-50%,-50%) rotate(45deg) scale(0);
        transition:transform .25s var(--ease)}
.ez-key.end{background:var(--acc-h);width:9px;height:9px}
.ez-key.in{transform:translate(-50%,-50%) rotate(45deg) scale(1)}

/* Checklist */
.ck-count{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--t2)}
.ck-list{display:flex;flex-direction:column;gap:2px;position:relative}
.ck-row{display:flex;align-items:center;gap:9px;padding:7px 6px;border-radius:5px;font-size:12px;color:var(--t2);transition:color .25s}
.ck-box{width:14px;height:14px;border-radius:4px;border:1.5px solid var(--bd2);flex:0 0 auto;position:relative;transition:background .2s,border-color .2s}
.ck-row.done .ck-box,.co-hit.done .ck-box{background:var(--ok);border-color:var(--ok)}
.ck-row.done .ck-box::after,.co-hit.done .ck-box::after{content:"";position:absolute;left:3.5px;top:0;width:4px;height:8px;
  border:solid #10210f;border-width:0 2px 2px 0;transform:rotate(45deg)}
.ck-row.done .ck-txt{color:var(--t1)}
.ck-ask{margin-left:auto;width:18px;height:18px;border-radius:50%;background:var(--bg-el);color:var(--acc-h);font-size:11px;
        font-weight:700;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.ck-hint{position:absolute;right:36px;top:40px;background:var(--acc);color:#fff;font-size:11px;padding:6px 10px;border-radius:8px;
         opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s var(--ease);pointer-events:none}
.ck-hint.in{opacity:1;transform:none}

/* Safe Zones */
.sz-split{display:grid;grid-template-columns:1fr 132px;gap:12px;align-items:start}
.sz-side{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.sz-frame{position:relative;aspect-ratio:9/16;border-radius:6px;overflow:hidden;background:#000}
.sz-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:53% 40%}
.sz-over i{position:absolute;background:rgba(229,72,77,.3);opacity:0;transition:all .45s var(--ease)}
.sz-over.on i{opacity:1}
.sz-top{left:0;right:0;top:0;height:9%}
.sz-rail{right:0;top:38%;bottom:18%;width:16%}
.sz-bottom{left:0;right:0;bottom:0;height:18%}
.sz-over i.sz-safe{background:transparent;border:1.5px dashed #4CD174;left:6%;right:18%;top:11%;bottom:20%}
.sz-over.p1 .sz-rail{top:44%;width:15%}
.sz-over.p1 .sz-bottom{height:22%}
.sz-over.p1 .sz-safe{bottom:24%;right:17%}
.sz-over.p2 .sz-top{height:6%}
.sz-over.p2 .sz-rail{top:52%;width:14%}
.sz-over.p2 .sz-bottom{height:15%}
.sz-over.p2 .sz-safe{top:8%;bottom:17%;right:16%}