/* DeroVideo Timeline v2.1 */
:root{--ink:#151517;--muted:#68636b;--purple:#6d35ff;--yellow:#ffd43b;--green:#84e66d;--blue:#4ba9ff;--coral:#ff6b5f;--p:0;--stage-scale:1;--ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}html{scroll-behavior:auto}body{margin:0;overflow-x:hidden;background:#101116;color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
#liquidBg{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.95;background:radial-gradient(circle at 18% 22%,rgba(109,53,255,.62),transparent 34%),radial-gradient(circle at 76% 32%,rgba(75,169,255,.50),transparent 32%),radial-gradient(circle at 50% 82%,rgba(255,107,95,.36),transparent 36%),#101116;filter:saturate(1.25)}
#liquidBg:before{content:"";position:absolute;inset:-20%;background:radial-gradient(circle at 30% 30%,rgba(132,230,109,.22),transparent 25%),radial-gradient(circle at 70% 44%,rgba(255,212,59,.16),transparent 24%),radial-gradient(circle at 44% 72%,rgba(109,53,255,.34),transparent 28%);filter:blur(34px);animation:liquid 16s ease-in-out infinite alternate}
@keyframes liquid{0%{transform:translate3d(-3%,2%,0) scale(1)}50%{transform:translate3d(4%,-3%,0) scale(1.08)}100%{transform:translate3d(-2%,-4%,0) scale(1.04)}}
.bg-darken{position:fixed;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(8,10,14,.08),rgba(8,10,14,.36))}
main,.stage,.stage-dots,.stage-label{position:relative;z-index:5}.hero{position:relative;height:600vh}.stage{position:sticky;top:0;height:100vh;display:grid;place-items:center;overflow:hidden;padding:0}
.workspace{position:relative;width:1240px;height:750px;min-height:750px;perspective:1600px;transform:scale(var(--stage-scale));transform-origin:center center}
.workspace:before{content:"";position:absolute;inset:-12%;z-index:0;pointer-events:none;background:radial-gradient(circle at 20% 30%,rgba(109,53,255,.42),transparent 28%),radial-gradient(circle at 78% 38%,rgba(75,169,255,.34),transparent 28%),radial-gradient(circle at 44% 84%,rgba(255,107,95,.30),transparent 30%);filter:blur(34px) saturate(1.25);opacity:.92;animation:liquidHero 14s ease-in-out infinite alternate}
@keyframes liquidHero{0%{transform:translate3d(-2%,1%,0) scale(1)}50%{transform:translate3d(3%,-2%,0) scale(1.06)}100%{transform:translate3d(-1%,-3%,0) scale(1.03)}}
.monitor,.timeline,.panel,.sticker,.float-icon{position:absolute}
.monitor{left:50%;top:0;z-index:8;width:900px;height:480px;overflow:hidden;transform:translateX(-50%) rotateY(-4deg) rotateX(2deg);border:5px solid #07070a;border-radius:34px;background:#111115;box-shadow:0 0 70px rgba(75,169,255,.24),0 0 120px rgba(109,53,255,.18),0 52px 120px rgba(21,21,23,.46),0 18px 0 rgba(21,21,23,.10),inset 0 0 0 1px rgba(255,255,255,.08);animation:monitorFloat 7.5s ease-in-out infinite}
@keyframes monitorFloat{0%,100%{transform:translateX(-50%) translateY(0) rotateY(-4deg) rotateX(2deg)}50%{transform:translateX(-50%) translateY(-10px) rotateY(-4deg) rotateX(2deg)}}
.window-top{height:46px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(180deg,#1d1d22,#111115);border-bottom:1px solid rgba(255,255,255,.08)}
.dots{display:flex;gap:9px}.dots span{width:13px;height:13px;border-radius:50%}.dots span:nth-child(1){background:var(--coral)}.dots span:nth-child(2){background:var(--yellow)}.dots span:nth-child(3){background:var(--green)}.window-actions{display:flex;gap:10px;color:rgba(255,255,255,.45);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.screen{position:relative;height:calc(100% - 46px);margin:18px;padding:30px;overflow:hidden;border-radius:24px;background:radial-gradient(circle at 78% 30%,rgba(255,212,59,.16),transparent 26%),radial-gradient(circle at 12% 88%,rgba(75,169,255,.12),transparent 26%),linear-gradient(145deg,#fff8ea,#ffefd8);box-shadow:inset 0 0 0 2px rgba(21,21,23,.08),inset 0 18px 35px rgba(255,255,255,.55),0 0 44px rgba(255,255,255,.08)}
.screen:after{content:"";position:absolute;top:-40%;left:calc(var(--p) * 1.5% - 28%);width:130px;height:180%;background:rgba(255,255,255,.24);transform:rotate(18deg);filter:blur(16px)}
.scene{position:absolute;inset:30px;z-index:2;display:grid;align-content:center;opacity:0;filter:blur(10px);transform:translateY(42px) scale(.94) rotate(-1deg);transition:opacity .8s var(--ease),transform .8s var(--ease),filter .8s var(--ease);pointer-events:none}
body[data-stage="0"] .intro,body[data-stage="1"] .services,body[data-stage="2"] .cases,body[data-stage="3"] .flow,body[data-stage="4"] .cta-scene{opacity:1;filter:blur(0);transform:translateY(0) scale(1) rotate(0);pointer-events:auto}
.easter-screen{position:absolute;inset:24px;z-index:7;display:grid;place-items:center;padding:28px;border:3px solid var(--ink);border-radius:24px;background:radial-gradient(circle at 80% 20%,rgba(255,212,59,.28),transparent 28%),linear-gradient(135deg,#19191f,#30265f);color:#fff;box-shadow:7px 7px 0 rgba(21,21,23,.8),0 0 48px rgba(109,53,255,.34);opacity:0;visibility:hidden;transform:translateY(18px) scale(.96) rotate(-1deg);transition:.45s var(--ease);pointer-events:none}.easter-screen.active{opacity:1;visibility:visible;transform:translateY(0) scale(1) rotate(0)}.easter-card{width:min(560px,100%)}.easter-kicker{display:inline-flex;margin-bottom:14px;padding:8px 12px;border:2px solid var(--ink);border-radius:999px;background:var(--yellow);color:var(--ink);box-shadow:3px 3px 0 var(--ink);font-size:11px;font-weight:1000;text-transform:uppercase;letter-spacing:.12em}.easter-screen h2{margin:0;font-size:clamp(36px,4.6vw,64px);line-height:.86;letter-spacing:-.08em;text-transform:uppercase}.easter-screen p{max-width:520px;margin:16px 0 0;color:rgba(255,255,255,.82);font-size:16px;font-weight:800;line-height:1.45}.easter-close{margin-top:20px;display:inline-flex;padding:10px 13px;border:2px solid var(--ink);border-radius:999px;background:var(--blue);color:var(--ink);box-shadow:3px 3px 0 var(--ink);font-size:11px;font-weight:1000;text-transform:uppercase;letter-spacing:.1em}
.tool-layer{position:absolute;inset:18px;z-index:6;pointer-events:none}.safe-frame,.caption-preview,.draw-line,.fx-sparks,.tool-toast{opacity:0;visibility:hidden;transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s var(--ease)}.safe-frame{position:absolute;inset:24px;border:3px dashed rgba(21,21,23,.62);border-radius:18px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}.caption-preview{position:absolute;left:50%;bottom:42px;transform:translate(-50%,12px);padding:12px 18px;border:3px solid var(--ink);border-radius:14px;background:#fff;color:var(--ink);box-shadow:4px 4px 0 var(--ink);font-size:15px;font-weight:1000;text-transform:uppercase;letter-spacing:.04em}.draw-line{position:absolute;inset:54px 70px 70px 70px;overflow:visible}.draw-line path{fill:none;stroke:var(--coral);stroke-width:10;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(4px 4px 0 rgba(21,21,23,.55))}.fx-sparks{position:absolute;inset:0}.fx-sparks span{position:absolute;display:grid;place-items:center;width:54px;height:54px;border:3px solid var(--ink);border-radius:16px;background:var(--yellow);box-shadow:4px 4px 0 var(--ink);font-size:24px;font-weight:1000;color:var(--ink)}.fx-sparks span:nth-child(1){left:18%;top:20%;transform:rotate(-12deg)}.fx-sparks span:nth-child(2){right:22%;top:34%;background:var(--blue);transform:rotate(10deg)}.fx-sparks span:nth-child(3){left:48%;bottom:18%;background:var(--green);transform:rotate(-6deg)}.tool-toast{position:absolute;right:18px;top:18px;transform:translateY(-8px);padding:9px 12px;border:2px solid var(--ink);border-radius:999px;background:var(--yellow);color:var(--ink);box-shadow:3px 3px 0 var(--ink);font-size:11px;font-weight:1000;text-transform:uppercase;letter-spacing:.11em}body[data-tool="select"] .tool-toast,body[data-tool="frame"] .tool-toast,body[data-tool="text"] .tool-toast,body[data-tool="draw"] .tool-toast,body[data-tool="fx"] .tool-toast{opacity:1;visibility:visible;transform:translateY(0)}body[data-tool="frame"] .safe-frame,body[data-tool="text"] .caption-preview,body[data-tool="draw"] .draw-line,body[data-tool="fx"] .fx-sparks{opacity:1;visibility:visible}body[data-tool="text"] .caption-preview{transform:translate(-50%,0)}
.doodle{position:absolute;z-index:1;pointer-events:none;font-size:48px;font-weight:1000;color:var(--purple)}.doodle.one{top:30px;left:64px;transform:rotate(-18deg)}.doodle.two{top:78px;right:70px;color:var(--yellow)}.doodle.three{right:90px;bottom:66px;transform:rotate(12deg)}.hero-title,.scene-title{margin:0;max-width:640px;font-weight:1000;line-height:.86;letter-spacing:-.085em;text-transform:uppercase}.hero-title{font-size:clamp(48px,5.8vw,84px)}.scene-title{font-size:clamp(34px,4.4vw,60px)}.a{color:var(--purple)}.z{color:var(--coral)}.kicker{width:max-content;margin-bottom:14px;padding:8px 12px;border:2px solid var(--ink);border-radius:999px;background:var(--yellow);box-shadow:3px 3px 0 var(--ink);font-size:11px;font-weight:1000;text-transform:uppercase;letter-spacing:.13em}.lead{max-width:540px;margin:14px 0 0;color:var(--muted);font-size:15px;font-weight:800;line-height:1.45}
.chips,.mini-grid,.case-list,.flow-grid{margin-top:24px}.chips{display:flex;flex-wrap:wrap;gap:12px}.chip{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border:3px solid rgba(21,21,23,.9);border-radius:15px;box-shadow:0 8px 0 rgba(21,21,23,.15);font-size:15px;font-weight:1000;text-decoration:none;color:inherit}.yellow{background:var(--yellow)}.purple{background:var(--purple);color:#fff}.blue{background:var(--blue)}.green{background:var(--green)}.coral{background:var(--coral);color:#fff}.mini-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.mini-card{min-height:92px;padding:12px;border:2px solid var(--ink);border-radius:16px;background:#fff;box-shadow:3px 3px 0 var(--ink);font-size:12px;font-weight:1000;line-height:1.15}.mini-card i{width:30px;height:30px;display:grid;place-items:center;margin-bottom:10px;border:2px solid var(--ink);border-radius:10px;font-style:normal}.case-list{display:grid;gap:10px}.case-row{display:grid;grid-template-columns:140px 1fr auto;gap:12px;align-items:center;padding:10px;border:2px solid rgba(21,21,23,.16);border-radius:16px;background:rgba(255,255,255,.78);box-shadow:3px 3px 0 rgba(21,21,23,.12);text-decoration:none;color:inherit}.case-row:hover{transform:translateY(-2px)}.thumb{height:58px;display:grid;place-items:center;border-radius:12px;background:#141419;color:#fff;font-size:12px;font-weight:1000}.thumb.patto{background:#172414}.thumb.dgk{background:#11263c}.case-row strong{display:block;font-size:18px;line-height:1;letter-spacing:-.06em}.case-row span{display:block;margin-top:4px;color:var(--muted);font-size:11px;font-weight:900}.pill{padding:8px 10px;border:2px solid var(--ink);border-radius:999px;background:var(--yellow);font-size:11px;font-weight:1000;white-space:nowrap}.flow-grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.flow-grid:before{content:"";position:absolute;left:11%;right:11%;top:30px;height:3px;border-radius:999px;background:rgba(75,169,255,.35)}.step{position:relative;z-index:2;text-align:center;font-size:12px;font-weight:1000}.step-icon{width:76px;height:58px;display:grid;place-items:center;margin:0 auto 10px;border:2px solid var(--ink);border-radius:18px;background:#fff;box-shadow:3px 3px 0 var(--ink);font-size:22px}.cta-card{max-width:620px;padding:28px;border:3px solid var(--ink);border-radius:26px;background:linear-gradient(135deg,var(--purple),#8a4dff);color:#fff;box-shadow:7px 7px 0 var(--ink)}.cta-card h2{margin:0;color:#fff;font-size:clamp(36px,4.8vw,64px);line-height:.88;letter-spacing:-.08em;text-transform:uppercase}.cta-card p{margin:14px 0 0;color:rgba(255,255,255,.82);font-size:15px;font-weight:800;line-height:1.45}
.timeline{left:50%;top:425px;z-index:20;width:960px;height:255px;overflow:hidden;cursor:pointer;user-select:none;touch-action:none;transform:translateX(-50%) rotateX(3deg) rotateY(-2deg);border:5px solid #07070a;border-radius:32px;background:linear-gradient(180deg,#19191f,#101014);box-shadow:0 44px 92px rgba(21,21,23,.44),0 14px 0 rgba(21,21,23,.12),inset 0 0 0 1px rgba(255,255,255,.06);animation:timelineFloat 8.5s ease-in-out infinite .55s}@keyframes timelineFloat{0%,100%{transform:translateX(-50%) translateY(0) rotateX(3deg) rotateY(-2deg)}50%{transform:translateX(-50%) translateY(8px) rotateX(3deg) rotateY(-2deg)}}.timeline-top{height:48px;padding:0 24px 0 110px;display:flex;align-items:center;justify-content:space-between;color:rgba(255,255,255,.4);font-size:12px;font-weight:900}.timeline-grid{position:relative;z-index:1;display:grid;grid-template-columns:70px 1fr;gap:10px;padding:0 18px 18px}.tracks,.rows{display:grid;gap:10px}.tracks div,.row{height:37px;border-radius:10px}.tracks div{display:grid;place-items:center;color:#fff;font-size:14px;font-weight:1000}.tracks div:nth-child(1){background:var(--purple)}.tracks div:nth-child(2){background:#187ce6}.tracks div:nth-child(3){background:#1ea85f}.tracks div:nth-child(4){background:#008c80}.row{display:flex;gap:9px;padding:3px;background:rgba(255,255,255,.055)}
.clip{height:100%;min-width:38px;flex:0 0 auto;border-radius:8px;position:relative;overflow:hidden;cursor:grab;opacity:.52;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);transition:.25s var(--ease);width:18%}.clip.wide{width:52%}.clip.medium{width:28%}.clip.audio-wide{width:64%}.clip.audio-short{width:24%}.clip:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);transform:translateX(calc(var(--p) * 1% - 100%))}.clip:before{content:attr(data-label);position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,255,255,.88);font-size:10px;font-weight:1000;text-transform:uppercase;letter-spacing:.08em;text-shadow:0 1px 4px rgba(0,0,0,.32);pointer-events:none}.clip.yellow:before{color:rgba(21,21,23,.78);text-shadow:none}.clip.wave:before{content:"Audio"}.clip.purple{background:linear-gradient(180deg,#8d54ff,#5d2bdc)}.clip.blue{background:linear-gradient(180deg,#59b6ff,#167be4)}.clip.green{background:linear-gradient(180deg,#2ddc87,#13814e)}.clip.coral{background:linear-gradient(180deg,#ff7580,#e64356)}.clip.yellow{background:linear-gradient(180deg,#ffdc4f,#f3ac22)}.clip.wave{background:repeating-linear-gradient(90deg,rgba(255,255,255,0) 0 9px,rgba(255,255,255,.35) 9px 12px),linear-gradient(180deg,#20e09a,#098565)}
body[data-stage="0"] .clip[data-active~="0"],body[data-stage="1"] .clip[data-active~="1"],body[data-stage="2"] .clip[data-active~="2"],body[data-stage="3"] .clip[data-active~="3"],body[data-stage="4"] .clip[data-active~="4"]{opacity:1;transform:translateY(-2px);filter:saturate(1.25) brightness(1.08)}.clip.dragging{opacity:.22;transform:none!important;filter:saturate(.85) brightness(.85);outline:2px dashed rgba(255,212,59,.9);outline-offset:2px}.row.sorting{outline:2px dashed rgba(75,169,255,.65);outline-offset:3px}.clip.under-playhead{opacity:.92!important;filter:saturate(1.22) brightness(1.08)!important;box-shadow:0 0 10px rgba(75,169,255,.46),0 0 20px rgba(75,169,255,.22),inset 0 0 0 1px rgba(255,255,255,.28);transform:translateY(-2px)}.drag-ghost{position:fixed;z-index:9999;pointer-events:none;opacity:1!important;transform:rotate(-3deg) scale(1.04);box-shadow:0 18px 38px rgba(0,0,0,.35),0 0 0 2px rgba(255,255,255,.25) inset;outline:3px solid var(--yellow);outline-offset:2px}.secret{display:none!important}
.playhead{position:absolute;top:42px;bottom:0;left:calc(12.5% + var(--p) * .78%);z-index:40;width:86px;transform:translateX(-50%);cursor:grab;touch-action:none}.playhead:before{content:"";position:absolute;top:0;bottom:0;left:50%;width:5px;border-radius:999px;background:var(--blue);transform:translateX(-50%);box-shadow:0 0 22px rgba(75,169,255,.65)}.playhead:after{content:"";position:absolute;top:-15px;left:50%;width:30px;height:30px;border:3px solid var(--ink);border-radius:9px;background:var(--blue);transform:translateX(-50%) rotate(45deg);box-shadow:0 8px 24px rgba(75,169,255,.42)}body.scrubbing .playhead{cursor:grabbing}body.scrubbing .playhead:before{width:7px;box-shadow:0 0 34px rgba(75,169,255,.9)}body.scrubbing .playhead:after{transform:translateX(-50%) rotate(45deg) scale(1.12);box-shadow:0 12px 32px rgba(75,169,255,.62)}
.panel{z-index:12;border:4px solid #07070a;border-radius:24px;background:#141419;color:#fff;box-shadow:0 25px 60px rgba(21,21,23,.28)}.tools-panel{right:22px;top:122px;width:94px;padding:18px 12px;transform:rotateY(-10deg)}.panel-title{margin:0 0 14px;font-size:18px;font-weight:1000}.tool-icons{display:grid;gap:14px}.tool-btn{height:42px;display:grid;place-items:center;border:0;border-radius:12px;background:rgba(255,255,255,.08);color:#fff;font-size:20px;font-weight:1000;cursor:pointer;transition:.22s var(--ease)}.tool-btn:hover,.tool-btn.active{background:var(--yellow);color:var(--ink);transform:translateY(-2px);box-shadow:3px 3px 0 var(--ink)}
.float-icon{z-index:22;width:76px;height:76px;display:grid;place-items:center;border:4px solid rgba(21,21,23,.9);border-radius:25px;font-size:34px;font-weight:1000;box-shadow:0 24px 48px rgba(21,21,23,.2);animation:bob 5s ease-in-out infinite}.float-icon.play{right:36px;top:360px;background:var(--coral);color:#fff;transform:rotate(6deg)}.float-icon.bolt{left:36px;top:510px;background:var(--yellow);animation-delay:.6s}.float-icon.star{right:38px;top:575px;background:var(--purple);color:#fff;animation-delay:1.1s}.sticker{position:absolute;z-index:24;display:grid;place-items:center;border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink);font-weight:1000;pointer-events:none;animation:bob 4.8s ease-in-out infinite;border-radius:22px;background:#fff}.sticker.sparkle{left:70px;top:34px;width:74px;height:74px;background:var(--yellow);font-size:30px}.sticker.smile{right:120px;top:42px;width:78px;height:78px;font-size:30px}.sticker.arrow{left:58px;bottom:60px;width:92px;height:60px;background:var(--green);font-size:28px}@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -12px}}
.tutorial{position:absolute;z-index:80;pointer-events:none;display:flex;align-items:center;gap:10px;padding:11px 14px;border:3px solid var(--ink);border-radius:18px;background:#fff;box-shadow:6px 6px 0 var(--ink);font-size:12px;font-weight:1000;text-transform:uppercase;letter-spacing:.08em;line-height:1.15;animation:bob 4.2s ease-in-out infinite;opacity:1;visibility:visible;transition:.28s var(--ease)}.tutorial b{display:block;font-size:15px;letter-spacing:-.03em}.tip-icon{display:grid;place-items:center;width:34px;height:34px;border:2px solid var(--ink);border-radius:12px;background:#fff;box-shadow:3px 3px 0 var(--ink);font-size:17px}.tutorial.playhead-tip{left:360px;top:388px;background:var(--blue)}.tutorial.clip-tip{right:74px;top:552px;background:var(--yellow)}.tutorial.order-tip{left:238px;top:570px;background:var(--green)}body[data-hints="hidden"] .tutorial{opacity:0;visibility:hidden}
.stage-dots{position:fixed;right:22px;top:50%;z-index:90;display:grid;gap:10px;transform:translateY(-50%)}.stage-dot{width:12px;height:12px;padding:0;border:2px solid var(--ink);border-radius:50%;background:#fff;box-shadow:2px 2px 0 var(--ink);cursor:pointer;appearance:none}.stage-dot.active{background:var(--blue);transform:scale(1.45)}.stage-label{position:fixed;right:50px;top:50%;z-index:90;padding:9px 12px;border:2px solid var(--ink);border-radius:999px;background:rgba(255,255,255,.72);backdrop-filter:blur(12px);box-shadow:4px 4px 0 var(--ink);font-size:11px;font-weight:1000;text-transform:uppercase;letter-spacing:.12em;transform:translateY(-50%)}
@media(max-width:760px){.stage-dots,.stage-label,.tutorial{display:none!important}.tools-panel{right:12px}.float-icon,.sticker{display:none!important}}


/* === v2.3 real interactive tools === */
.project,.project-panel,.caption,.caption-panel{display:none!important}
.tool-layer{
  position:absolute!important;
  inset:18px!important;
  z-index:12!important;
  pointer-events:none;
}
body[data-tool="select"] .tool-layer,
body[data-tool="frame"] .tool-layer,
body[data-tool="text"] .tool-layer,
body[data-tool="draw"] .tool-layer{
  pointer-events:auto;
}
.work-object,.frame-box,.text-drop{
  position:absolute;
  z-index:25;
  pointer-events:auto;
  user-select:none;
}
.work-object{
  cursor:grab;
  transition:filter .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease);
}
body[data-tool="select"] .work-object:hover,
.work-object.is-dragging{
  filter:saturate(1.25) brightness(1.06);
  transform:translateY(-2px) rotate(-2deg);
}
.work-object.is-dragging{cursor:grabbing;z-index:90!important}
.object-card{
  min-width:118px;
  padding:12px 14px;
  border:3px solid var(--ink);
  border-radius:18px;
  box-shadow:6px 6px 0 var(--ink),0 0 24px rgba(255,255,255,.16);
  font-size:12px;
  font-weight:1000;
  letter-spacing:.08em;
}
.object-card b{display:block;font-size:18px;line-height:.9;letter-spacing:-.05em}
.object-card span{display:block;margin-top:6px;font-size:10px;opacity:.78}
.object-yellow{background:var(--yellow);color:var(--ink)}
.object-blue{background:var(--blue);color:var(--ink)}
.object-green{background:var(--green);color:var(--ink)}
.object-sticker{
  width:62px;height:62px;
  display:grid;place-items:center;
  border:3px solid var(--ink);
  border-radius:18px;
  box-shadow:6px 6px 0 var(--ink);
  font-size:30px;font-weight:1000;
}
.frame-box{
  border:4px solid var(--ink);
  border-radius:18px;
  background:rgba(255,212,59,.18);
  box-shadow:5px 5px 0 var(--ink),0 0 28px rgba(75,169,255,.28);
  animation:frameTravel 5.5s linear forwards, framePulse 1.1s ease-in-out infinite;
}
.frame-box:before{
  content:"FRAME";
  position:absolute;left:10px;top:-17px;
  padding:5px 8px;
  border:2px solid var(--ink);
  border-radius:999px;
  background:var(--yellow);
  color:var(--ink);
  box-shadow:3px 3px 0 var(--ink);
  font-size:9px;font-weight:1000;letter-spacing:.1em;
}
@keyframes frameTravel{
  from{translate:0 0;opacity:1}
  to{translate:120px -38px;opacity:.1}
}
@keyframes framePulse{
  0%,100%{scale:1}
  50%{scale:1.035}
}
.text-drop{
  min-width:120px;
  padding:10px 15px;
  border:3px solid var(--ink);
  border-radius:15px;
  background:#fff;
  color:var(--ink);
  box-shadow:5px 5px 0 var(--ink),0 0 24px rgba(255,212,59,.32);
  font-size:18px;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:-.03em;
  cursor:text;
}
.text-drop:focus{outline:3px solid var(--blue);outline-offset:3px}
.text-drop.is-dragging{cursor:grabbing;z-index:90!important}

.safe-frame,.caption-preview,.draw-line,.fx-sparks,.tool-toast,.hd-shader{
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s var(--ease);
}
body[data-tool="frame"] .safe-frame,
body[data-tool="text"] .caption-preview,
body[data-tool="draw"] .draw-line,
body[data-tool="fx"] .fx-sparks,
body[data-tool="select"] .tool-toast,
body[data-tool="frame"] .tool-toast,
body[data-tool="text"] .tool-toast,
body[data-tool="draw"] .tool-toast,
body[data-tool="fx"] .tool-toast{
  opacity:1!important;
  visibility:visible!important;
}
body[data-tool="draw"] .draw-line path{animation:drawPath 1.1s var(--ease) forwards}
body[data-tool="text"] .caption-preview{transform:translate(-50%,0) rotate(-1deg)!important}

.hd-shader{
  position:absolute;
  inset:-18px;
  z-index:5;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  mix-blend-mode:screen;
  background:
    radial-gradient(circle at 22% 24%,rgba(75,169,255,.55),transparent 25%),
    radial-gradient(circle at 76% 32%,rgba(255,212,59,.44),transparent 22%),
    radial-gradient(circle at 45% 78%,rgba(255,107,95,.48),transparent 28%),
    conic-gradient(from 120deg at 50% 50%,rgba(109,53,255,.3),rgba(75,169,255,.22),rgba(132,230,109,.22),rgba(255,107,95,.22),rgba(109,53,255,.3));
  filter:saturate(1.45) contrast(1.15) blur(.2px);
  animation:hdShaderMove 6.5s ease-in-out infinite alternate;
}
.hd-shader:after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:18px 18px;
  opacity:.28;
}
body[data-fx="on"] .hd-shader{
  opacity:1!important;
  visibility:visible!important;
}
body[data-fx="on"] .screen{
  filter:saturate(1.18) contrast(1.04);
  box-shadow:
    inset 0 0 0 2px rgba(21,21,23,.08),
    inset 0 18px 35px rgba(255,255,255,.55),
    0 0 44px rgba(255,255,255,.08),
    0 0 80px rgba(75,169,255,.34),
    0 0 120px rgba(109,53,255,.22)!important;
}
body[data-fx="on"] .monitor{
  box-shadow:
    0 0 90px rgba(75,169,255,.38),
    0 0 160px rgba(109,53,255,.28),
    0 52px 120px rgba(21,21,23,.46),
    0 18px 0 rgba(21,21,23,.10),
    inset 0 0 0 1px rgba(255,255,255,.08)!important;
}
@keyframes hdShaderMove{
  0%{transform:translate3d(-2%,1%,0) scale(1) rotate(0deg)}
  50%{transform:translate3d(2%,-1%,0) scale(1.05) rotate(2deg)}
  100%{transform:translate3d(-1%,-2%,0) scale(1.03) rotate(-2deg)}
}

.tools-panel,.tools{
  right:18px!important;
  top:108px!important;
  width:142px!important;
  padding:14px!important;
  border-radius:26px!important;
  background:linear-gradient(180deg,#19191f,#101015)!important;
  transform:rotateY(-9deg) rotateZ(1deg)!important;
  box-shadow:0 26px 70px rgba(0,0,0,.34),6px 6px 0 #07070a!important;
}
.tools-panel .panel-title,.tools .panel-title{
  margin:0 0 12px!important;
  font-size:15px!important;
  letter-spacing:-.04em!important;
  color:#fff!important;
}
.tool-icons{display:grid!important;gap:9px!important}
.tool-btn{
  position:relative!important;
  display:grid!important;
  grid-template-columns:34px 1fr!important;
  align-items:center!important;
  gap:8px!important;
  height:42px!important;
  padding:0 10px!important;
  border:2px solid rgba(255,255,255,.16)!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.07)!important;
  color:#fff!important;
  cursor:pointer!important;
  font-size:11px!important;
  font-weight:1000!important;
  text-transform:uppercase!important;
  letter-spacing:.06em!important;
  text-align:left!important;
  box-shadow:none!important;
  transition:.2s var(--ease)!important;
}
.tool-emoji{
  display:grid!important;
  place-items:center!important;
  width:30px!important;
  height:30px!important;
  border:2px solid #07070a!important;
  border-radius:12px!important;
  background:#fff!important;
  color:#151517!important;
  font-size:17px!important;
  box-shadow:3px 3px 0 #07070a!important;
}
.tool-btn:hover,.tool-btn.active{
  transform:translateY(-2px) rotate(-1deg)!important;
  background:var(--yellow)!important;
  color:var(--ink)!important;
  border-color:#07070a!important;
  box-shadow:4px 4px 0 #07070a!important;
}
.tool-btn.active .tool-emoji{background:var(--blue)!important;color:var(--ink)!important}
@keyframes drawPath{to{stroke-dashoffset:0}}


/* === v2.4 selectable site + draw-your-own tools === */
body[data-tool="select"] .tool-layer{pointer-events:none!important}
body[data-tool="select"] .tool-layer .work-object,
body[data-tool="select"] .tool-layer .text-drop,
body[data-tool="select"] .tool-layer .frame-box{pointer-events:auto!important}
body[data-tool="frame"] .tool-layer,
body[data-tool="text"] .tool-layer,
body[data-tool="draw"] .tool-layer{pointer-events:auto!important;cursor:crosshair}
body[data-tool="select"] .screen,
body[data-tool="select"] .workspace{cursor:default}
.selectable-move{cursor:grab!important;will-change:translate,transform,filter}
.selectable-move:hover{filter:saturate(1.12) brightness(1.03)}
.selectable-move.is-selected{
  outline:3px solid var(--blue)!important;
  outline-offset:5px!important;
  filter:saturate(1.18) brightness(1.04)!important;
}
.selectable-move.is-dragging{
  cursor:grabbing!important;
  z-index:120!important;
  filter:saturate(1.25) brightness(1.08)!important;
}
.work-object,.frame-box,.text-drop{
  position:absolute;
  z-index:25;
  pointer-events:auto;
  user-select:none;
}
.work-object{cursor:grab}
.frame-box{
  border:4px solid var(--ink);
  border-radius:18px;
  background:rgba(255,212,59,.18);
  box-shadow:5px 5px 0 var(--ink),0 0 28px rgba(75,169,255,.28);
  min-width:18px;
  min-height:18px;
}
.frame-box:before{
  content:"FRAME";
  position:absolute;left:10px;top:-17px;
  padding:5px 8px;
  border:2px solid var(--ink);
  border-radius:999px;
  background:var(--yellow);
  color:var(--ink);
  box-shadow:3px 3px 0 var(--ink);
  font-size:9px;font-weight:1000;letter-spacing:.1em;
}
.frame-box.is-drawing{background:rgba(75,169,255,.18);box-shadow:5px 5px 0 var(--ink),0 0 38px rgba(75,169,255,.42)}
.text-drop{
  min-width:120px;
  padding:10px 15px;
  border:3px solid var(--ink);
  border-radius:15px;
  background:#fff;
  color:var(--ink);
  box-shadow:5px 5px 0 var(--ink),0 0 24px rgba(255,212,59,.32);
  font-size:18px;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:-.03em;
  cursor:text;
}
.text-drop:focus{outline:3px solid var(--blue);outline-offset:3px}
.free-draw-svg{
  position:absolute;
  inset:0;
  z-index:18;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;
}
.free-draw-svg path{
  fill:none;
  stroke:var(--coral);
  stroke-width:8;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(4px 4px 0 rgba(21,21,23,.55));
}
body[data-tool="draw"] .free-draw-svg{pointer-events:none}
.draw-cursor-dot{
  position:absolute;
  z-index:90;
  width:22px;height:22px;
  border:3px solid var(--ink);
  border-radius:50%;
  background:var(--coral);
  box-shadow:3px 3px 0 var(--ink);
  pointer-events:none;
}
.tool-layer{touch-action:none}
.tool-toast{z-index:120!important}
body[data-tool="frame"] .safe-frame,
body[data-tool="text"] .caption-preview,
body[data-tool="fx"] .fx-sparks,
body[data-tool="select"] .tool-toast,
body[data-tool="frame"] .tool-toast,
body[data-tool="text"] .tool-toast,
body[data-tool="draw"] .tool-toast,
body[data-tool="fx"] .tool-toast{opacity:1!important;visibility:visible!important}
.hd-shader{
  position:absolute;
  inset:-18px;
  z-index:5;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  mix-blend-mode:screen;
  background:
    radial-gradient(circle at 22% 24%,rgba(75,169,255,.55),transparent 25%),
    radial-gradient(circle at 76% 32%,rgba(255,212,59,.44),transparent 22%),
    radial-gradient(circle at 45% 78%,rgba(255,107,95,.48),transparent 28%),
    conic-gradient(from 120deg at 50% 50%,rgba(109,53,255,.3),rgba(75,169,255,.22),rgba(132,230,109,.22),rgba(255,107,95,.22),rgba(109,53,255,.3));
  filter:saturate(1.45) contrast(1.15) blur(.2px);
  animation:hdShaderMove 6.5s ease-in-out infinite alternate;
}
.hd-shader:after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:18px 18px;
  opacity:.28;
}
body[data-fx="on"] .hd-shader{opacity:1!important;visibility:visible!important}
body[data-fx="on"] .screen{
  filter:saturate(1.18) contrast(1.04);
  box-shadow:
    inset 0 0 0 2px rgba(21,21,23,.08),
    inset 0 18px 35px rgba(255,255,255,.55),
    0 0 44px rgba(255,255,255,.08),
    0 0 80px rgba(75,169,255,.34),
    0 0 120px rgba(109,53,255,.22)!important;
}
@keyframes hdShaderMove{
  0%{transform:translate3d(-2%,1%,0) scale(1) rotate(0deg)}
  50%{transform:translate3d(2%,-1%,0) scale(1.05) rotate(2deg)}
  100%{transform:translate3d(-1%,-2%,0) scale(1.03) rotate(-2deg)}
}
.object-card{
  min-width:118px;
  padding:12px 14px;
  border:3px solid var(--ink);
  border-radius:18px;
  box-shadow:6px 6px 0 var(--ink),0 0 24px rgba(255,255,255,.16);
  font-size:12px;
  font-weight:1000;
  letter-spacing:.08em;
}
.object-card b{display:block;font-size:18px;line-height:.9;letter-spacing:-.05em}
.object-card span{display:block;margin-top:6px;font-size:10px;opacity:.78}
.object-yellow{background:var(--yellow);color:var(--ink)}
.object-blue{background:var(--blue);color:var(--ink)}
.object-green{background:var(--green);color:var(--ink)}
.object-sticker{
  width:62px;height:62px;
  display:grid;place-items:center;
  border:3px solid var(--ink);
  border-radius:18px;
  box-shadow:6px 6px 0 var(--ink);
  font-size:30px;font-weight:1000;
}


/* === v2.5 selectable decorations + stronger editing-program feel === */
body[data-tool="select"] .selectable-move,
body[data-tool="select"] .float-icon,
body[data-tool="select"] .sticker,
body[data-tool="select"] .badge,
body[data-tool="select"] .scribble,
body[data-tool="select"] .doodle,
body[data-tool="select"] .chip,
body[data-tool="select"] .mini-card,
body[data-tool="select"] .case-row,
body[data-tool="select"] .step,
body[data-tool="select"] .cta-card,
body[data-tool="select"] .hero-title,
body[data-tool="select"] .scene-title,
body[data-tool="select"] .lead,
body[data-tool="select"] .kicker{
  pointer-events:auto!important;
  cursor:grab!important;
}

body[data-tool="select"] .float-icon:hover,
body[data-tool="select"] .sticker:hover,
body[data-tool="select"] .badge:hover,
body[data-tool="select"] .scribble:hover,
body[data-tool="select"] .doodle:hover,
body[data-tool="select"] .chip:hover,
body[data-tool="select"] .mini-card:hover,
body[data-tool="select"] .case-row:hover,
body[data-tool="select"] .step:hover,
body[data-tool="select"] .cta-card:hover,
body[data-tool="select"] .hero-title:hover,
body[data-tool="select"] .scene-title:hover,
body[data-tool="select"] .lead:hover,
body[data-tool="select"] .kicker:hover{
  filter:saturate(1.18) brightness(1.05)!important;
}

.selectable-move.is-selected,
.is-selected{
  outline:3px solid var(--blue)!important;
  outline-offset:6px!important;
  box-shadow:0 0 0 2px rgba(255,255,255,.65),0 0 28px rgba(75,169,255,.42)!important;
}

.is-selected::selection{background:transparent}

.is-dragging{
  cursor:grabbing!important;
  z-index:999!important;
  filter:saturate(1.24) brightness(1.08)!important;
}

.edit-status{
  position:absolute;
  left:50%;
  top:-44px;
  z-index:140;
  transform:translateX(-50%);
  padding:9px 14px;
  border:2px solid var(--ink);
  border-radius:999px;
  background:rgba(255,244,223,.86);
  color:var(--ink);
  box-shadow:4px 4px 0 var(--ink);
  backdrop-filter:blur(10px);
  font-size:11px;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.12em;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:.22s var(--ease);
}
body[data-tool="select"] .edit-status,
body[data-tool="frame"] .edit-status,
body[data-tool="text"] .edit-status,
body[data-tool="draw"] .edit-status,
body[data-tool="fx"] .edit-status{
  opacity:1;
  visibility:visible;
}

/* subtle editing grid in the preview */
body[data-tool="select"] .screen::before,
body[data-tool="frame"] .screen::before,
body[data-tool="text"] .screen::before,
body[data-tool="draw"] .screen::before{
  content:"";
  position:absolute;
  inset:18px;
  z-index:1;
  pointer-events:none;
  border-radius:18px;
  opacity:.18;
  background-image:
    linear-gradient(rgba(21,21,23,.18) 1px,transparent 1px),
    linear-gradient(90deg,rgba(21,21,23,.14) 1px,transparent 1px);
  background-size:24px 24px;
}


/* === v2.6 full editor upgrade === */
:root{--editor-zoom:1}
.project,.project-panel,.caption,.caption-panel{display:none!important}
.workspace{scale:var(--editor-zoom);transition:scale .25s var(--ease)}
body.is-playing .playhead::before{box-shadow:0 0 36px rgba(75,169,255,.95)!important}
body.is-playing .monitor{filter:saturate(1.08)}

.layers-panel,.props-panel{
  position:absolute;
  z-index:70;
  width:178px;
  padding:14px;
  border-radius:24px;
  background:linear-gradient(180deg,#19191f,#101015);
  color:#fff;
  box-shadow:0 26px 70px rgba(0,0,0,.34),6px 6px 0 #07070a;
}
.layers-panel{left:12px;top:100px;transform:rotateY(8deg) rotateZ(-1deg)}
.props-panel{left:12px;top:354px;transform:rotateY(8deg) rotateZ(1deg)}
.layer-list{display:grid;gap:8px;max-height:178px;overflow:auto}
.layer-item{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  width:100%;padding:8px 9px;
  border:2px solid rgba(255,255,255,.12);
  border-radius:13px;
  background:rgba(255,255,255,.07);
  color:#fff;
  cursor:pointer;
  font-size:10px;font-weight:1000;text-transform:uppercase;letter-spacing:.06em;
}
.layer-item.active{background:var(--yellow);color:var(--ink);border-color:#07070a;box-shadow:3px 3px 0 #07070a}
.layer-item small{opacity:.58;font-size:9px}
.props-panel label{
  display:grid;gap:6px;margin-top:10px;
  color:rgba(255,255,255,.7);
  font-size:10px;font-weight:1000;text-transform:uppercase;letter-spacing:.12em;
}
.props-panel input{width:100%;accent-color:var(--yellow)}
.props-panel input[type="color"]{height:34px;border:0;border-radius:10px;background:transparent}

.editor-bar{
  position:absolute;
  left:50%;
  bottom:-48px;
  z-index:120;
  display:flex;align-items:center;gap:8px;
  transform:translateX(-50%);
  padding:8px;
  border:3px solid var(--ink);
  border-radius:999px;
  background:rgba(255,244,223,.88);
  box-shadow:6px 6px 0 var(--ink);
  backdrop-filter:blur(12px);
}
.editor-bar button,.editor-bar label{
  border:2px solid var(--ink);
  border-radius:999px;
  background:#fff;
  color:var(--ink);
  box-shadow:3px 3px 0 var(--ink);
  padding:9px 12px;
  font-size:10px;font-weight:1000;text-transform:uppercase;letter-spacing:.08em;
  cursor:pointer;
}
.editor-bar button:hover{background:var(--yellow)}
.editor-bar label{display:flex;align-items:center;gap:8px}
.editor-bar input{width:92px;accent-color:var(--blue)}

.selection-box{
  position:absolute;
  z-index:160;
  pointer-events:none;
  border:3px solid var(--blue);
  border-radius:12px;
  box-shadow:0 0 0 2px rgba(255,255,255,.68),0 0 28px rgba(75,169,255,.42);
  opacity:0;visibility:hidden;
}
.selection-box.active{opacity:1;visibility:visible}
.selection-box .handle{
  position:absolute;
  width:16px;height:16px;
  border:3px solid var(--ink);
  border-radius:50%;
  background:var(--yellow);
  box-shadow:3px 3px 0 var(--ink);
  pointer-events:auto;
  cursor:nwse-resize;
}
.selection-box .nw{left:-10px;top:-10px}.selection-box .ne{right:-10px;top:-10px;cursor:nesw-resize}.selection-box .sw{left:-10px;bottom:-10px;cursor:nesw-resize}.selection-box .se{right:-10px;bottom:-10px}

.export-modal{
  position:absolute;
  inset:0;
  z-index:300;
  display:grid;
  place-items:center;
  pointer-events:none;
  opacity:0;visibility:hidden;
  background:rgba(16,17,22,.28);
  backdrop-filter:blur(6px);
  transition:.25s var(--ease);
}
.export-modal.active{opacity:1;visibility:visible}
.export-card{
  width:360px;
  padding:24px;
  border:4px solid var(--ink);
  border-radius:28px;
  background:#fff4df;
  box-shadow:9px 9px 0 var(--ink);
  color:var(--ink);
  text-align:center;
}
.export-card strong{display:block;font-size:28px;line-height:.9;letter-spacing:-.06em;text-transform:uppercase}
.export-track{height:18px;margin:18px 0 10px;border:3px solid var(--ink);border-radius:999px;background:#fff;overflow:hidden}
.export-track span{display:block;width:0%;height:100%;background:linear-gradient(90deg,var(--blue),var(--purple),var(--coral));transition:width .16s linear}
.export-card small{font-size:11px;font-weight:1000;text-transform:uppercase;letter-spacing:.12em}

.selectable-move{cursor:grab!important;will-change:translate,transform,filter}
.selectable-move:hover{filter:saturate(1.12) brightness(1.03)}
.is-selected{
  outline:3px solid var(--blue)!important;
  outline-offset:6px!important;
}
.is-dragging{cursor:grabbing!important;z-index:999!important;filter:saturate(1.24) brightness(1.08)!important}
body[data-tool="select"] .float-icon,
body[data-tool="select"] .sticker,
body[data-tool="select"] .badge,
body[data-tool="select"] .scribble,
body[data-tool="select"] .doodle,
body[data-tool="select"] .chip,
body[data-tool="select"] .mini-card,
body[data-tool="select"] .case-row,
body[data-tool="select"] .step,
body[data-tool="select"] .cta-card,
body[data-tool="select"] .hero-title,
body[data-tool="select"] .scene-title,
body[data-tool="select"] .lead,
body[data-tool="select"] .kicker{pointer-events:auto!important;cursor:grab!important}

.frame-box,.text-drop,.work-object{position:absolute;z-index:25;pointer-events:auto;user-select:none}
.frame-box{border:4px solid var(--ink);border-radius:18px;background:rgba(255,212,59,.18);box-shadow:5px 5px 0 var(--ink),0 0 28px rgba(75,169,255,.28);min-width:18px;min-height:18px}
.frame-box:before{content:"FRAME";position:absolute;left:10px;top:-17px;padding:5px 8px;border:2px solid var(--ink);border-radius:999px;background:var(--yellow);color:var(--ink);box-shadow:3px 3px 0 var(--ink);font-size:9px;font-weight:1000;letter-spacing:.1em}
.text-drop{min-width:120px;padding:10px 15px;border:3px solid var(--ink);border-radius:15px;background:#fff;color:var(--ink);box-shadow:5px 5px 0 var(--ink),0 0 24px rgba(255,212,59,.32);font-size:18px;font-weight:1000;text-transform:uppercase;letter-spacing:-.03em;cursor:text}
.free-draw-svg{position:absolute;inset:0;z-index:18;width:100%;height:100%;overflow:visible;pointer-events:none}
.free-draw-svg path{fill:none;stroke:var(--coral);stroke-width:8;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(4px 4px 0 rgba(21,21,23,.55))}
.hd-shader{position:absolute;inset:-18px;z-index:5;pointer-events:none;opacity:0;visibility:hidden;mix-blend-mode:screen;background:radial-gradient(circle at 22% 24%,rgba(75,169,255,.55),transparent 25%),radial-gradient(circle at 76% 32%,rgba(255,212,59,.44),transparent 22%),radial-gradient(circle at 45% 78%,rgba(255,107,95,.48),transparent 28%),conic-gradient(from 120deg at 50% 50%,rgba(109,53,255,.3),rgba(75,169,255,.22),rgba(132,230,109,.22),rgba(255,107,95,.22),rgba(109,53,255,.3));filter:saturate(1.45) contrast(1.15) blur(.2px);animation:hdShaderMove 6.5s ease-in-out infinite alternate}
body[data-fx="on"] .hd-shader{opacity:1!important;visibility:visible!important}
@keyframes hdShaderMove{0%{transform:translate3d(-2%,1%,0) scale(1) rotate(0deg)}50%{transform:translate3d(2%,-1%,0) scale(1.05) rotate(2deg)}100%{transform:translate3d(-1%,-2%,0) scale(1.03) rotate(-2deg)}}
body[data-tool="select"] .tool-layer{pointer-events:none!important}
body[data-tool="select"] .tool-layer .work-object,body[data-tool="select"] .tool-layer .text-drop,body[data-tool="select"] .tool-layer .frame-box{pointer-events:auto!important}
body[data-tool="frame"] .tool-layer,body[data-tool="text"] .tool-layer,body[data-tool="draw"] .tool-layer{pointer-events:auto!important;cursor:crosshair}
@media(max-width:1100px){.layers-panel,.props-panel{display:none}.editor-bar{bottom:-38px;scale:.86}.tools-panel,.tools{scale:.86}}
@media(max-width:760px){.editor-bar{display:none}.selection-box{display:none}}


/* === v2.7 calmer editor UI === */
/* Layers/properties are hidden until Select is active */
.layers-panel,
.props-panel{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transition:
    opacity .32s var(--ease),
    visibility .32s var(--ease),
    transform .32s var(--ease)!important;
}
.layers-panel{
  transform:translateX(-120%) rotateY(8deg) rotateZ(-1deg)!important;
}
.props-panel{
  transform:translateX(-120%) rotateY(8deg) rotateZ(1deg)!important;
}
body[data-tool="select"] .layers-panel,
body[data-tool="select"] .props-panel{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
body[data-tool="select"] .layers-panel{
  transform:translateX(0) rotateY(8deg) rotateZ(-1deg)!important;
}
body[data-tool="select"] .props-panel{
  transform:translateX(0) rotateY(8deg) rotateZ(1deg)!important;
}

/* Keep the editor bar quieter unless editing tools are being used */
.editor-bar{
  opacity:.72;
  transition:opacity .25s var(--ease), transform .25s var(--ease)!important;
}
.editor-bar:hover,
body[data-tool="select"] .editor-bar,
body[data-tool="frame"] .editor-bar,
body[data-tool="text"] .editor-bar,
body[data-tool="draw"] .editor-bar{
  opacity:1;
}

/* Only active slide content should feel editable/selectable */
.scene:not(.active-scene) .selectable-move{
  pointer-events:none!important;
}
.scene:not(.active-scene) *{
  pointer-events:none!important;
}
body[data-tool="select"] .scene.active-scene .selectable-move{
  pointer-events:auto!important;
}

/* Make hidden scene layers never appear selected */
.scene:not(.active-scene) .is-selected{
  outline:0!important;
  box-shadow:none!important;
}

/* Reduce visual clutter from inactive editing UI */
body:not([data-tool="select"]) .selection-box{
  opacity:0!important;
  visibility:hidden!important;
}
body[data-tool="select"] .screen::before{
  opacity:.12!important;
}


/* === v2.8 bigger screen, no layers === */
.layers-panel,
.layer-list,
#layerList{
  display:none!important;
}

/* Bigger base canvas; JS scales this down/up so it stays inside the viewport */
.workspace{
  width:1360px!important;
  height:840px!important;
  min-height:840px!important;
  transform:scale(var(--stage-scale,1))!important;
  transform-origin:center center!important;
}

/* Bigger preview screen */
.monitor{
  top:0!important;
  width:1040px!important;
  height:560px!important;
}

/* Timeline moves lower and stays connected visually */
.timeline{
  top:505px!important;
  width:1080px!important;
  height:252px!important;
}

/* Properties is enough; make it compact and less present */
.props-panel{
  left:18px!important;
  top:210px!important;
  width:164px!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translateX(-130%) rotateY(8deg) rotateZ(1deg)!important;
  transition:
    opacity .32s var(--ease),
    visibility .32s var(--ease),
    transform .32s var(--ease)!important;
}

body[data-tool="select"] .props-panel{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:translateX(0) rotateY(8deg) rotateZ(1deg)!important;
}

/* Tools slightly tighter so the bigger monitor gets breathing room */
.tools-panel,
.tools{
  right:16px!important;
  top:134px!important;
  scale:.92;
}

/* Floating elements pushed further around the larger screen */
.float-icon.play{right:22px!important;top:405px!important}
.float-icon.bolt{left:34px!important;top:590px!important}
.float-icon.star{right:32px!important;top:665px!important}
.sticker.sparkle{left:92px!important;top:34px!important}
.sticker.smile{right:150px!important;top:34px!important}
.sticker.arrow{left:46px!important;bottom:60px!important}

.editor-bar{
  bottom:-42px!important;
}

.selection-box{
  z-index:170!important;
}

@media(max-width:1100px){
  .monitor{width:1040px!important;height:560px!important}
  .timeline{width:1080px!important;top:505px!important}
  .props-panel{display:none!important}
  .tools-panel,.tools{scale:.82;right:8px!important;top:128px!important}
  .editor-bar{scale:.78;bottom:-34px!important}
}

@media(max-width:760px){
  .workspace{
    width:1360px!important;
    height:840px!important;
    min-height:840px!important;
  }
  .monitor{width:1040px!important;height:560px!important}
  .timeline{width:1080px!important;top:505px!important}
  .props-panel,.layers-panel{display:none!important}
  .tools-panel,.tools{display:none!important}
}


/* === v2.9 select fix: main visible elements selectable again === */
body[data-tool="select"] .screen,
body[data-tool="select"] .screen *,
body[data-tool="select"] .workspace,
body[data-tool="select"] .workspace *{
  pointer-events:auto;
}

/* Keep controls working normally */
body[data-tool="select"] .timeline,
body[data-tool="select"] .timeline *,
body[data-tool="select"] .tools-panel,
body[data-tool="select"] .tools-panel *,
body[data-tool="select"] .editor-bar,
body[data-tool="select"] .editor-bar *,
body[data-tool="select"] .props-panel,
body[data-tool="select"] .props-panel *,
body[data-tool="select"] .selection-box,
body[data-tool="select"] .selection-box *{
  pointer-events:auto!important;
}

/* Hidden slides stay unclickable, active slide becomes clickable */
.scene{
  pointer-events:none!important;
}
.scene.active-scene,
.scene.active-scene *{
  pointer-events:auto!important;
}

/* Easter overlay only selectable when visible */
.easter-screen:not(.active){
  pointer-events:none!important;
}
.easter-screen.active,
.easter-screen.active *{
  pointer-events:auto!important;
}

/* Selectable feel */
body[data-tool="select"] .scene.active-scene .hero-title,
body[data-tool="select"] .scene.active-scene .scene-title,
body[data-tool="select"] .scene.active-scene .lead,
body[data-tool="select"] .scene.active-scene .kicker,
body[data-tool="select"] .scene.active-scene .chip,
body[data-tool="select"] .scene.active-scene .mini-card,
body[data-tool="select"] .scene.active-scene .case-row,
body[data-tool="select"] .scene.active-scene .step,
body[data-tool="select"] .scene.active-scene .cta-card,
body[data-tool="select"] .doodle,
body[data-tool="select"] .float-icon,
body[data-tool="select"] .sticker,
body[data-tool="select"] .work-object,
body[data-tool="select"] .text-drop,
body[data-tool="select"] .frame-box{
  cursor:grab!important;
}

body[data-tool="select"] .scene.active-scene .hero-title:hover,
body[data-tool="select"] .scene.active-scene .scene-title:hover,
body[data-tool="select"] .scene.active-scene .lead:hover,
body[data-tool="select"] .scene.active-scene .kicker:hover,
body[data-tool="select"] .scene.active-scene .chip:hover,
body[data-tool="select"] .scene.active-scene .mini-card:hover,
body[data-tool="select"] .scene.active-scene .case-row:hover,
body[data-tool="select"] .scene.active-scene .step:hover,
body[data-tool="select"] .scene.active-scene .cta-card:hover,
body[data-tool="select"] .doodle:hover,
body[data-tool="select"] .float-icon:hover,
body[data-tool="select"] .sticker:hover{
  filter:saturate(1.18) brightness(1.05)!important;
}

/* Doodles originally had pointer-events:none, force them selectable in Select mode */
body[data-tool="select"] .doodle,
body[data-tool="select"] .sticker,
body[data-tool="select"] .float-icon{
  pointer-events:auto!important;
}

/* Reduce selection conflicts with overlays */
body[data-tool="select"] .tool-layer{
  pointer-events:none!important;
}
body[data-tool="select"] .tool-layer .work-object,
body[data-tool="select"] .tool-layer .text-drop,
body[data-tool="select"] .tool-layer .frame-box{
  pointer-events:auto!important;
}

/* Make selected main elements clearer without making page too busy */
.is-selected{
  outline:3px solid var(--blue)!important;
  outline-offset:6px!important;
  box-shadow:0 0 0 2px rgba(255,255,255,.7),0 0 28px rgba(75,169,255,.42)!important;
}
.is-dragging{
  cursor:grabbing!important;
  z-index:999!important;
  filter:saturate(1.22) brightness(1.07)!important;
}


/* === v3.0 hard selection fix === */
/* The selector now uses fixed viewport coordinates, so it stays correct with scaled/3D workspace. */
.selection-box{
  position:fixed!important;
  z-index:999999!important;
  pointer-events:none!important;
  border:3px solid var(--blue)!important;
  border-radius:12px!important;
  box-shadow:0 0 0 2px rgba(255,255,255,.75),0 0 28px rgba(75,169,255,.5)!important;
  opacity:0!important;
  visibility:hidden!important;
  transform:none!important;
}
.selection-box.active{
  opacity:1!important;
  visibility:visible!important;
}
.selection-box .handle{
  position:absolute!important;
  width:16px!important;
  height:16px!important;
  border:3px solid var(--ink)!important;
  border-radius:999px!important;
  background:var(--yellow)!important;
  box-shadow:3px 3px 0 var(--ink)!important;
  pointer-events:auto!important;
}
.selection-box .nw{left:-10px!important;top:-10px!important;cursor:nwse-resize!important}
.selection-box .ne{right:-10px!important;top:-10px!important;cursor:nesw-resize!important}
.selection-box .sw{left:-10px!important;bottom:-10px!important;cursor:nesw-resize!important}
.selection-box .se{right:-10px!important;bottom:-10px!important;cursor:nwse-resize!important}

/* Keep select simple and reliable */
body[data-tool="select"] .tool-layer{pointer-events:none!important}
body[data-tool="select"] .tool-layer .work-object,
body[data-tool="select"] .tool-layer .text-drop,
body[data-tool="select"] .tool-layer .frame-box{pointer-events:auto!important}

.scene{pointer-events:none!important}
.scene.active-scene,
.scene.active-scene *{pointer-events:auto!important}
.easter-screen:not(.active){pointer-events:none!important}
.easter-screen.active,
.easter-screen.active *{pointer-events:auto!important}

body[data-tool="select"] .doodle,
body[data-tool="select"] .float-icon,
body[data-tool="select"] .sticker,
body[data-tool="select"] .badge,
body[data-tool="select"] .scribble,
body[data-tool="select"] .scene.active-scene .hero-title,
body[data-tool="select"] .scene.active-scene .scene-title,
body[data-tool="select"] .scene.active-scene .lead,
body[data-tool="select"] .scene.active-scene .kicker,
body[data-tool="select"] .scene.active-scene .chip,
body[data-tool="select"] .scene.active-scene .mini-card,
body[data-tool="select"] .scene.active-scene .case-row,
body[data-tool="select"] .scene.active-scene .step,
body[data-tool="select"] .scene.active-scene .cta-card,
body[data-tool="select"] .work-object,
body[data-tool="select"] .text-drop,
body[data-tool="select"] .frame-box{
  pointer-events:auto!important;
  cursor:grab!important;
}

.is-selected{
  outline:0!important;
  box-shadow:none!important;
  filter:saturate(1.16) brightness(1.04)!important;
}
.is-dragging{
  cursor:grabbing!important;
  z-index:99999!important;
  filter:saturate(1.22) brightness(1.08)!important;
}

/* Hide layers forever; keep properties only on Select */
.layers-panel,#layerList,.layer-list{display:none!important}
.props-panel{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translateX(-130%) rotateY(8deg) rotateZ(1deg)!important;
}
body[data-tool="select"] .props-panel{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:translateX(0) rotateY(8deg) rotateZ(1deg)!important;
}

/* Tools that draw need the layer clickable */
body[data-tool="frame"] .tool-layer,
body[data-tool="text"] .tool-layer,
body[data-tool="draw"] .tool-layer{
  pointer-events:auto!important;
  cursor:crosshair!important;
}


/* === v3.1 hard fix: selector outside transforms + reliable hit testing === */
.screen::before,
.screen::after,
.monitor::before,
.monitor::after,
.workspace::before,
.bg-darken,
#liquidBg{
  pointer-events:none!important;
}

.selection-box{
  position:fixed!important;
  z-index:2147483000!important;
  pointer-events:none!important;
  border:3px solid var(--blue)!important;
  border-radius:12px!important;
  box-shadow:0 0 0 2px rgba(255,255,255,.75),0 0 30px rgba(75,169,255,.55)!important;
  opacity:0!important;
  visibility:hidden!important;
  transform:none!important;
}
.selection-box.active{
  opacity:1!important;
  visibility:visible!important;
}
.selection-box .handle{
  position:absolute!important;
  width:16px!important;
  height:16px!important;
  border:3px solid var(--ink)!important;
  border-radius:999px!important;
  background:var(--yellow)!important;
  box-shadow:3px 3px 0 var(--ink)!important;
  pointer-events:auto!important;
}
.selection-box .nw{left:-10px!important;top:-10px!important;cursor:nwse-resize!important}
.selection-box .ne{right:-10px!important;top:-10px!important;cursor:nesw-resize!important}
.selection-box .sw{left:-10px!important;bottom:-10px!important;cursor:nesw-resize!important}
.selection-box .se{right:-10px!important;bottom:-10px!important;cursor:nwse-resize!important}

.scene{pointer-events:none!important}
.scene.active-scene,
.scene.active-scene *{pointer-events:auto!important}
.easter-screen:not(.active){pointer-events:none!important}
.easter-screen.active,
.easter-screen.active *{pointer-events:auto!important}

body[data-tool="select"] .tool-layer{pointer-events:none!important}
body[data-tool="select"] .tool-layer .work-object,
body[data-tool="select"] .tool-layer .text-drop,
body[data-tool="select"] .tool-layer .frame-box{
  pointer-events:auto!important;
}

body[data-tool="frame"] .tool-layer,
body[data-tool="text"] .tool-layer,
body[data-tool="draw"] .tool-layer{
  pointer-events:auto!important;
  cursor:crosshair!important;
}

body[data-tool="select"] .selectable-move{
  pointer-events:auto!important;
  cursor:grab!important;
}
body[data-tool="select"] .selectable-move:hover{
  filter:saturate(1.18) brightness(1.05)!important;
}
.is-selected{
  outline:0!important;
  box-shadow:none!important;
  filter:saturate(1.16) brightness(1.04)!important;
}
.is-dragging{
  cursor:grabbing!important;
  z-index:999999!important;
  filter:saturate(1.22) brightness(1.08)!important;
}

.layers-panel,
#layerList,
.layer-list{
  display:none!important;
}
.props-panel{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translateX(-130%) rotateY(8deg) rotateZ(1deg)!important;
}
body[data-tool="select"] .props-panel{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:translateX(0) rotateY(8deg) rotateZ(1deg)!important;
}


/* === v3.2 return: old timeline style + new editor features === */
.layers-panel,#layerList,.layer-list{display:none!important}

/* Keep the older fun layout, but make it calmer */
.project{display:none!important}
.caption{display:none!important}
.tools{
  right:12px!important;
  top:118px!important;
  width:140px!important;
  padding:14px!important;
  border-radius:26px!important;
  background:linear-gradient(180deg,#19191f,#101015)!important;
  box-shadow:0 26px 70px rgba(0,0,0,.34),6px 6px 0 #07070a!important;
}
.tool-icons{display:grid!important;gap:9px!important}
.tool-icons div{display:none!important}
.tool-btn{
  display:grid!important;
  grid-template-columns:32px 1fr!important;
  align-items:center!important;
  gap:8px!important;
  height:40px!important;
  padding:0 9px!important;
  border:2px solid rgba(255,255,255,.14)!important;
  border-radius:15px!important;
  background:rgba(255,255,255,.07)!important;
  color:#fff!important;
  text-align:left!important;
  font-size:10px!important;
  font-weight:1000!important;
  text-transform:uppercase!important;
  letter-spacing:.08em!important;
  cursor:pointer!important;
}
.tool-btn b{
  width:28px;height:28px;
  display:grid;place-items:center;
  border:2px solid #07070a;
  border-radius:10px;
  background:#fff;
  color:var(--ink);
  box-shadow:3px 3px 0 #07070a;
  font-size:16px;
}
.tool-btn.active,.tool-btn:hover{
  background:var(--yellow)!important;
  color:var(--ink)!important;
  border-color:#07070a!important;
  box-shadow:4px 4px 0 #07070a!important;
}
.tool-btn.active b{background:var(--blue)}

.props-panel{
  right:12px!important;
  top:390px!important;
  width:190px!important;
  padding:14px!important;
  border-radius:24px!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translateX(120%) rotateY(-8deg) rotateZ(1deg)!important;
  transition:opacity .28s var(--ease),visibility .28s var(--ease),transform .28s var(--ease)!important;
}
body[data-tool="select"] .props-panel{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:translateX(0) rotateY(-8deg) rotateZ(1deg)!important;
}
.props-panel .panel-title{margin-bottom:6px!important}
.selected-name{
  display:block;
  margin-bottom:10px;
  color:rgba(255,255,255,.48);
  font-size:10px;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.12em;
}
.props-panel label{
  display:grid;
  gap:5px;
  margin-top:8px;
  color:rgba(255,255,255,.64);
  font-size:10px;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.12em;
}
.props-panel input{
  width:100%;
  height:30px;
  border:0;
  border-radius:10px;
  padding:0 8px;
  background:rgba(255,255,255,.10);
  color:#fff;
  accent-color:var(--yellow);
}
.props-panel input[type="color"]{height:34px;padding:2px}
.delete-layer{
  width:100%;
  margin-top:10px;
  padding:9px 10px;
  border:2px solid #07070a;
  border-radius:14px;
  background:var(--coral);
  color:#fff;
  box-shadow:3px 3px 0 #07070a;
  font-size:10px;
  font-weight:1000;
  text-transform:uppercase;
}

.v32-bar{
  position:absolute;
  left:50%;
  bottom:-48px;
  z-index:120;
  display:flex;
  align-items:center;
  gap:8px;
  transform:translateX(-50%);
  padding:8px;
  border:3px solid var(--ink);
  border-radius:999px;
  background:rgba(255,244,223,.9);
  box-shadow:6px 6px 0 var(--ink);
  backdrop-filter:blur(12px);
}
.v32-bar button,.v32-bar label{
  border:2px solid var(--ink);
  border-radius:999px;
  background:#fff;
  color:var(--ink);
  box-shadow:3px 3px 0 var(--ink);
  padding:8px 11px;
  font-size:10px;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.08em;
  cursor:pointer;
}
.v32-bar button:hover{background:var(--yellow)}
.v32-bar label{display:flex;align-items:center;gap:8px}
.v32-bar input{width:88px;accent-color:var(--blue)}

.tool-layer{
  position:absolute;
  inset:18px;
  z-index:12;
  pointer-events:none;
}
body[data-tool="frame"] .tool-layer,
body[data-tool="text"] .tool-layer,
body[data-tool="draw"] .tool-layer{
  pointer-events:auto;
  cursor:crosshair;
}
body[data-tool="select"] .tool-layer{pointer-events:none}
body[data-tool="select"] .tool-layer .frame-box,
body[data-tool="select"] .tool-layer .text-drop{
  pointer-events:auto;
}
.free-draw-svg{
  position:absolute;
  inset:0;
  z-index:18;
  width:100%;
  height:100%;
  pointer-events:none;
  overflow:visible;
}
.free-draw-svg path{
  fill:none;
  stroke:var(--coral);
  stroke-width:8;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(4px 4px 0 rgba(21,21,23,.55));
}
.hd-shader{
  position:absolute;
  inset:-18px;
  z-index:5;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  mix-blend-mode:screen;
  background:
    radial-gradient(circle at 22% 24%,rgba(75,169,255,.55),transparent 25%),
    radial-gradient(circle at 76% 32%,rgba(255,212,59,.44),transparent 22%),
    radial-gradient(circle at 45% 78%,rgba(255,107,95,.48),transparent 28%),
    conic-gradient(from 120deg at 50% 50%,rgba(109,53,255,.3),rgba(75,169,255,.22),rgba(132,230,109,.22),rgba(255,107,95,.22),rgba(109,53,255,.3));
  filter:saturate(1.45) contrast(1.15);
  animation:hdShaderMove 6s ease-in-out infinite alternate;
}
body[data-fx="on"] .hd-shader{opacity:1;visibility:visible}
@keyframes hdShaderMove{
  from{transform:translate3d(-2%,1%,0) scale(1)}
  to{transform:translate3d(2%,-2%,0) scale(1.04)}
}
.frame-box,.text-drop{
  position:absolute;
  z-index:40;
  pointer-events:auto;
  user-select:none;
}
.frame-box{
  min-width:16px;
  min-height:16px;
  border:4px solid var(--ink);
  border-radius:18px;
  background:rgba(255,212,59,.16);
  box-shadow:5px 5px 0 var(--ink),0 0 28px rgba(75,169,255,.26);
}
.frame-box:before{
  content:"FRAME";
  position:absolute;
  left:10px;
  top:-17px;
  padding:5px 8px;
  border:2px solid var(--ink);
  border-radius:999px;
  background:var(--yellow);
  box-shadow:3px 3px 0 var(--ink);
  font-size:9px;
  font-weight:1000;
  letter-spacing:.1em;
}
.text-drop{
  min-width:120px;
  padding:10px 15px;
  border:3px solid var(--ink);
  border-radius:15px;
  background:#fff;
  color:var(--ink);
  box-shadow:5px 5px 0 var(--ink),0 0 24px rgba(255,212,59,.32);
  font-size:18px;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:-.03em;
  cursor:text;
}
.screen-editable{
  cursor:grab!important;
}
.screen-editable:hover{
  filter:saturate(1.13) brightness(1.03);
}
.is-selected{
  outline:3px solid var(--blue)!important;
  outline-offset:6px!important;
  box-shadow:0 0 0 2px rgba(255,255,255,.75),0 0 28px rgba(75,169,255,.48)!important;
}
.is-dragging{
  cursor:grabbing!important;
  z-index:9999!important;
  filter:saturate(1.22) brightness(1.08)!important;
}
.selection-box{
  position:fixed!important;
  z-index:2147483000!important;
  pointer-events:none!important;
  border:3px solid var(--blue)!important;
  border-radius:12px!important;
  box-shadow:0 0 0 2px rgba(255,255,255,.75),0 0 30px rgba(75,169,255,.55)!important;
  opacity:0!important;
  visibility:hidden!important;
  transform:none!important;
}
.selection-box.active{opacity:1!important;visibility:visible!important}
.selection-box .handle{
  position:absolute!important;
  width:16px!important;
  height:16px!important;
  border:3px solid var(--ink)!important;
  border-radius:999px!important;
  background:var(--yellow)!important;
  box-shadow:3px 3px 0 var(--ink)!important;
  pointer-events:auto!important;
}
.selection-box .nw{left:-10px!important;top:-10px!important;cursor:nwse-resize!important}
.selection-box .ne{right:-10px!important;top:-10px!important;cursor:nesw-resize!important}
.selection-box .sw{left:-10px!important;bottom:-10px!important;cursor:nesw-resize!important}
.selection-box .se{right:-10px!important;bottom:-10px!important;cursor:nwse-resize!important}
.export-modal{
  position:absolute;
  inset:0;
  z-index:300;
  display:grid;
  place-items:center;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  background:rgba(16,17,22,.30);
  backdrop-filter:blur(7px);
  transition:.25s var(--ease);
}
.export-modal.active{opacity:1;visibility:visible}
.export-card{
  width:360px;
  padding:24px;
  border:4px solid var(--ink);
  border-radius:28px;
  background:#fff4df;
  box-shadow:9px 9px 0 var(--ink);
  color:var(--ink);
  text-align:center;
}
.export-card strong{
  display:block;
  font-size:28px;
  line-height:.9;
  letter-spacing:-.06em;
  text-transform:uppercase;
}
.export-track{
  height:18px;
  margin:18px 0 10px;
  border:3px solid var(--ink);
  border-radius:999px;
  background:#fff;
  overflow:hidden;
}
.export-track span{
  display:block;
  width:0%;
  height:100%;
  background:linear-gradient(90deg,var(--blue),var(--purple),var(--coral));
}
.export-card small{
  font-size:11px;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.12em;
}
body[data-tool="select"] .scene:not(.active-scene),
body[data-tool="select"] .scene:not(.active-scene) *{
  pointer-events:none!important;
}
.screen::before,.screen::after,.monitor::before,.monitor::after,.workspace::before,#liquidBg,.bg-darken{
  pointer-events:none!important;
}
@media(max-width:1100px){
  .props-panel{display:none!important}
  .v32-bar{scale:.82;bottom:-38px}
  .tools{scale:.86;right:8px!important}
}


/* === v3.3 inspector + selectability fix === */

/* Inspector is smaller, left side, and does not sit over the monitor/timeline */
.props-panel{
  left:14px!important;
  right:auto!important;
  top:118px!important;
  width:148px!important;
  padding:12px!important;
  border-radius:22px!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translateX(-120%) rotateY(8deg) rotateZ(-1deg)!important;
  transition:opacity .26s var(--ease),visibility .26s var(--ease),transform .26s var(--ease)!important;
}
body[data-tool="select"] .props-panel{
  opacity:.96!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:translateX(0) rotateY(8deg) rotateZ(-1deg)!important;
}
.props-panel .panel-title{
  margin:0 0 4px!important;
  font-size:14px!important;
}
.selected-name{
  display:block!important;
  max-width:120px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  margin-bottom:8px!important;
  color:rgba(255,255,255,.48)!important;
  font-size:9px!important;
  font-weight:1000!important;
  text-transform:uppercase!important;
  letter-spacing:.08em!important;
}
.props-panel label{
  display:grid!important;
  gap:4px!important;
  margin-top:7px!important;
  color:rgba(255,255,255,.66)!important;
  font-size:9px!important;
  font-weight:1000!important;
  text-transform:uppercase!important;
  letter-spacing:.1em!important;
}
.props-panel input{
  width:100%!important;
  height:26px!important;
  border:0!important;
  border-radius:9px!important;
  padding:0 6px!important;
  background:rgba(255,255,255,.10)!important;
  color:#fff!important;
  accent-color:var(--yellow)!important;
}
.props-panel input[type="color"]{height:30px!important;padding:2px!important}
.delete-layer{
  width:100%!important;
  margin-top:8px!important;
  padding:8px 9px!important;
  border:2px solid #07070a!important;
  border-radius:12px!important;
  background:var(--coral)!important;
  color:#fff!important;
  box-shadow:3px 3px 0 #07070a!important;
  font-size:9px!important;
  font-weight:1000!important;
  text-transform:uppercase!important;
}

/* Keep tools right, inspector left */
.tools{
  right:12px!important;
  left:auto!important;
  top:118px!important;
  width:138px!important;
}

/* Do not let old project/caption overlap */
.project,.caption,.layers-panel,#layerList,.layer-list{
  display:none!important;
}

/* Selectable loose decoration objects around the screen */
body[data-tool="select"] .float-icon,
body[data-tool="select"] .sticker,
body[data-tool="select"] .badge,
body[data-tool="select"] .scribble,
body[data-tool="select"] .doodle{
  pointer-events:auto!important;
  cursor:grab!important;
}

/* Doodles/stickers were pointer-events none earlier; override hard */
.float-icon,.sticker,.badge,.scribble,.doodle{
  pointer-events:auto;
}

/* But do not block timeline/tool controls */
.timeline,.timeline *,
.tools,.tools *,
.props-panel,.props-panel *,
.v32-bar,.v32-bar *,
.selection-box,.selection-box *{
  pointer-events:auto!important;
}

/* Active slide elements are selectable, hidden slides are not */
body[data-tool="select"] .scene:not(.active-scene),
body[data-tool="select"] .scene:not(.active-scene) *{
  pointer-events:none!important;
}
body[data-tool="select"] .scene.active-scene,
body[data-tool="select"] .scene.active-scene *{
  pointer-events:auto!important;
}

/* The screen overlay should not block selecting */
.screen::before,.screen::after,.monitor::before,.monitor::after,.workspace::before,#liquidBg,.bg-darken{
  pointer-events:none!important;
}

/* Visible selection box above everything */
.selection-box{
  position:fixed!important;
  z-index:2147483000!important;
  pointer-events:none!important;
  border:3px solid var(--blue)!important;
  border-radius:12px!important;
  box-shadow:0 0 0 2px rgba(255,255,255,.75),0 0 30px rgba(75,169,255,.55)!important;
  opacity:0!important;
  visibility:hidden!important;
  transform:none!important;
}
.selection-box.active{
  opacity:1!important;
  visibility:visible!important;
}
.selection-box .handle{
  position:absolute!important;
  width:16px!important;
  height:16px!important;
  border:3px solid var(--ink)!important;
  border-radius:999px!important;
  background:var(--yellow)!important;
  box-shadow:3px 3px 0 var(--ink)!important;
  pointer-events:auto!important;
}
.selection-box .nw{left:-10px!important;top:-10px!important;cursor:nwse-resize!important}
.selection-box .ne{right:-10px!important;top:-10px!important;cursor:nesw-resize!important}
.selection-box .sw{left:-10px!important;bottom:-10px!important;cursor:nesw-resize!important}
.selection-box .se{right:-10px!important;bottom:-10px!important;cursor:nwse-resize!important}

.screen-editable,.decor-editable{
  cursor:grab!important;
}
.screen-editable:hover,.decor-editable:hover{
  filter:saturate(1.14) brightness(1.04)!important;
}
.is-selected{
  outline:3px solid var(--blue)!important;
  outline-offset:6px!important;
  box-shadow:0 0 0 2px rgba(255,255,255,.75),0 0 28px rgba(75,169,255,.48)!important;
}
.is-dragging{
  cursor:grabbing!important;
  z-index:99999!important;
  filter:saturate(1.22) brightness(1.08)!important;
}

@media(max-width:1100px){
  .props-panel{display:none!important}
}


/* === v3.4 selection hard fix === */

/* Selector is visual only. It may NEVER block selecting another object. */
.selection-box{
  pointer-events:none!important;
}
.selection-box .handle{
  pointer-events:none!important;
}

/* While selecting, all intended objects are above decorative overlays */
body[data-tool="select"] .float-icon,
body[data-tool="select"] .sticker,
body[data-tool="select"] .badge,
body[data-tool="select"] .scribble,
body[data-tool="select"] .doodle,
body[data-tool="select"] .screen-editable,
body[data-tool="select"] .decor-editable,
body[data-tool="select"] .frame-box,
body[data-tool="select"] .text-drop{
  pointer-events:auto!important;
}

/* Prevent old outlines/shadows from becoming click shields */
.is-selected::before,
.is-selected::after{
  pointer-events:none!important;
}

/* Selection feedback without creating a blocking layer */
.is-selected{
  outline:3px solid var(--blue)!important;
  outline-offset:6px!important;
  box-shadow:0 0 0 2px rgba(255,255,255,.75),0 0 28px rgba(75,169,255,.48)!important;
}

/* Make tiny/loose objects easier to grab */
.float-icon,
.sticker,
.badge,
.scribble,
.doodle{
  min-width:28px;
  min-height:28px;
}

/* Disable text/link accidental capture while in select mode */
body[data-tool="select"] a,
body[data-tool="select"] .case-row{
  cursor:grab!important;
}