/* Meme Generator — full-screen dark studio (matches PDF Studio shell language) */
@font-face{font-family:'Anton';src:url('/tool-assets/meme-fonts/anton.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Archivo Black';src:url('/tool-assets/meme-fonts/archivo-black.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Oswald';src:url('/tool-assets/meme-fonts/oswald-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Oswald';src:url('/tool-assets/meme-fonts/oswald-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Montserrat';src:url('/tool-assets/meme-fonts/montserrat-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Montserrat';src:url('/tool-assets/meme-fonts/montserrat-900.woff2') format('woff2');font-weight:900;font-display:swap}
@font-face{font-family:'Comic Neue';src:url('/tool-assets/meme-fonts/comic-neue-700.woff2') format('woff2');font-weight:700;font-display:swap}
html,body{height:100%}
/* In-flow, NOT position:fixed — a fixed full-screen root traps everything
   after it in the page (the intro paragraph and the whole tool guide) BEHIND
   the studio, reachable by no scroll. In flow, the studio takes the first
   screen and the intro + guide sit under the tool where they belong. */
.mg-root{position:relative;display:flex;flex-direction:column;background:#17181c;color:#e8e9ec;font-family:Inter,system-ui,sans-serif}
body .mg-root{margin-top:0;height:100vh;height:100dvh}
.mg-topbar{display:flex;align-items:center;gap:14px;padding:6px 12px;background:#1f2025;border-bottom:1px solid #33353d;flex-wrap:wrap}
.mg-logo{font-weight:800;font-size:16px;line-height:1.05;color:inherit;text-decoration:none;cursor:pointer}.mg-logo small{display:block;font-weight:500;font-size:10px;color:#9aa0ab}
.mg-group{display:flex;align-items:center;gap:6px}
.mg-spacer{flex:1}
.mg-ibtn{background:#2a2b31;color:#e8e9ec;border:1px solid #3d3f47;border-radius:7px;padding:6px 10px;font-size:13px;cursor:pointer}
.mg-ibtn:hover{background:#35363e}
.mg-ibtn.active{background:#4f46e5;border-color:#4f46e5;color:#fff}
.mg-modebtn{background:transparent;color:#c9ccd4;border:1px solid #3d3f47;padding:6px 14px;cursor:pointer;font-size:13px}
.mg-modebtn:first-child{border-radius:7px 0 0 7px}.mg-modebtn:last-child{border-radius:0 7px 7px 0}
.mg-modebtn.active{background:#4f46e5;color:#fff;border-color:#4f46e5}
.mg-download{background:#4f46e5;color:#fff;border:0;border-radius:8px;padding:9px 16px;font-weight:700;font-size:14px;cursor:pointer}
.mg-download:hover{background:#4338ca}
.mg-selfmt{font-size:12px;color:#9aa0ab;display:flex;align-items:center;gap:5px}
.mg-selfmt select{background:#2a2b31;color:#e8e9ec;border:1px solid #3d3f47;border-radius:6px;padding:5px}
.mg-zoomlbl{font-size:12px;color:#9aa0ab;min-width:34px;text-align:center}
.mg-main{flex:1;display:flex;min-height:0}
.mg-rail{width:56px;background:#1f2025;border-right:1px solid #33353d;display:flex;flex-direction:column;padding:6px 0;gap:2px}
.mg-rbtn{background:transparent;border:0;color:#c9ccd4;font-size:19px;padding:8px 0 5px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px}
.mg-rbtn span{font-size:9px}.mg-rbtn.active{color:#fff;background:#2c2d34;box-shadow:inset 3px 0 0 #4f46e5}
.mg-panel{width:288px;background:#222329;border-right:1px solid #33353d;overflow-y:auto;padding:12px}
.mg-panel h4{margin:14px 0 6px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:#9aa0ab}
.mg-searchrow{display:flex;gap:6px}
.mg-searchrow input{flex:1;background:#17181c;border:1px solid #3d3f47;border-radius:7px;color:#fff;padding:8px;font-size:13px;min-width:0}
.mg-chips{display:flex;flex-wrap:wrap;gap:5px;margin:10px 0}
.mg-chip{background:#2a2b31;border:1px solid #3d3f47;color:#c9ccd4;border-radius:20px;padding:4px 10px;font-size:12px;cursor:pointer}
.mg-chip.active{background:#4f46e5;border-color:#4f46e5;color:#fff}
.mg-uploadrow{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.mg-uploadbtn{background:#2a2b31;border:1px dashed #55565f;border-radius:7px;padding:8px;text-align:center;font-size:13px;cursor:pointer;color:#e8e9ec;display:block}
.mg-uploadrow input[type=url]{background:#17181c;border:1px solid #3d3f47;border-radius:7px;color:#fff;padding:7px;font-size:12px}
.mg-sharebox{display:flex;flex-direction:column;gap:6px;margin:10px 0;border-top:1px solid #3d3f47;padding-top:10px}
.mg-sharebox input[type=text]{background:#17181c;border:1px solid #3d3f47;border-radius:7px;color:#fff;padding:7px;font-size:12px}
.mg-webrow{display:flex;gap:6px}
.mg-webrow input[type=text]{flex:1;min-width:0}
.mg-tplgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mg-tpl{position:relative;border:2px solid transparent;border-radius:8px;overflow:hidden;cursor:pointer;background:#17181c;padding:0;text-align:left}
.mg-tpl img{width:100%;height:86px;object-fit:cover;display:block}
.mg-tpl .mg-tplname{display:block;font-size:11px;color:#e8e9ec;padding:5px 6px;line-height:1.25}
.mg-tpl.sel{border-color:#4f46e5}
.mg-tpl .mg-fav{position:absolute;top:4px;right:4px;background:rgba(0,0,0,.55);border:0;color:#ffd94d;border-radius:50%;width:24px;height:24px;font-size:13px;cursor:pointer;line-height:1}
.mg-tpl .mg-layoutbox{height:86px;display:flex;align-items:center;justify-content:center;font-size:26px;background:#26272e;color:#9aa0ab}
.mg-hint{font-size:12px;color:#9aa0ab;line-height:1.45}
.mg-wide{width:100%;background:#2a2b31;color:#e8e9ec;border:1px solid #3d3f47;border-radius:8px;padding:9px;font-size:13px;cursor:pointer;margin:4px 0}
.mg-wide:hover{background:#35363e}
.mg-deepfry{background:#7c2d12;border-color:#ea580c;font-weight:800}
.mg-btnrow{display:flex;flex-wrap:wrap;gap:6px;margin:5px 0}
.mg-lbl{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;margin:7px 0;color:#c9ccd4}
.mg-lbl input[type=range]{flex:1;accent-color:#4f46e5}
.mg-colorhidden{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.mg-swatch{width:38px;height:26px;border:1px solid #3d3f47;border-radius:6px;background:#fff;padding:0;cursor:pointer;flex:none}
.mg-swatch:hover{border-color:#4f46e5}
.mg-colorpop{position:fixed;z-index:2000;width:216px;background:#1e1f24;border:1px solid #33353d;border-radius:10px;box-shadow:0 14px 40px rgba(0,0,0,.55);padding:10px}
.mg-cp-presets{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:10px}
.mg-cp-preset{height:24px;border-radius:6px;border:1px solid rgba(255,255,255,.25);cursor:pointer;padding:0}
.mg-cp-preset:hover{border-color:#fff;transform:scale(1.06)}
.mg-cp-sv{position:relative;height:120px;border-radius:8px;cursor:crosshair;touch-action:none}
.mg-cp-svthumb{position:absolute;width:14px;height:14px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.45);transform:translate(-50%,-50%);pointer-events:none}
.mg-cp-hue{position:relative;height:12px;border-radius:6px;margin-top:10px;cursor:pointer;touch-action:none;background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}
.mg-cp-huethumb{position:absolute;top:50%;width:14px;height:14px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.45);transform:translate(-50%,-50%);pointer-events:none}
.mg-cp-row{display:flex;align-items:center;gap:8px;margin-top:10px}
.mg-cp-chip{width:26px;height:26px;border-radius:6px;border:1px solid #3d3f47;flex:none}
.mg-cp-hex{flex:1;min-width:0;background:#17181c;border:1px solid #3d3f47;border-radius:6px;color:#fff;padding:6px 8px;font:13px monospace}
.mg-cp-drop{background:#26272e;border:1px solid #3d3f47;border-radius:6px;padding:5px 8px;cursor:pointer;flex:none}
.mg-lbl input[type=number]{width:70px;background:#17181c;border:1px solid #3d3f47;border-radius:6px;color:#fff;padding:5px}
.mg-lbl select{background:#17181c;border:1px solid #3d3f47;border-radius:6px;color:#fff;padding:5px;max-width:150px}
.mg-quickfields label,.mg-qf{display:block;margin:8px 0}
.mg-quickfields textarea,.mg-qf textarea{width:100%;background:#17181c;border:1px solid #3d3f47;border-radius:7px;color:#fff;padding:8px;font-size:13px;resize:vertical;min-height:36px;box-sizing:border-box}
.mg-quickfields .mg-qflabel,.mg-qf .mg-qflabel{font-size:11px;color:#9aa0ab;text-transform:uppercase;letter-spacing:.05em}
.mg-stickers,.mg-emoji{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.mg-stickers button,.mg-emoji button{background:#2a2b31;border:1px solid #3d3f47;border-radius:8px;padding:7px 2px;font-size:19px;cursor:pointer;color:#fff}
.mg-stickers button svg{width:26px;height:26px}
.mg-stage{flex:1;overflow:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#101116;background-image:radial-gradient(#232329 1px,transparent 1px);background-size:22px 22px;padding:18px;min-width:0}
.mg-canvaswrap{box-shadow:0 10px 44px rgba(0,0,0,.6);line-height:0}
.mg-status{color:#9aa0ab;font-size:13px;min-height:18px;margin:10px 0 0}
.mg-status.err{color:#f08a7a}
.mg-inspector{width:302px;background:#222329;border-left:1px solid #33353d;overflow-y:auto;padding:12px}
.mg-inspector h3{margin:2px 0 8px;font-size:14px}
.mg-layers{display:flex;flex-direction:column;gap:5px}
.mg-layer{display:flex;align-items:center;gap:5px;background:#2a2b31;border:1px solid #3d3f47;border-radius:7px;padding:6px 8px;font-size:12px;cursor:pointer}
.mg-layer.sel{border-color:#4f46e5}
.mg-layer .mg-lname{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mg-layer button{background:none;border:0;color:#c9ccd4;cursor:pointer;font-size:12px;padding:2px}
.mg-mymemes{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px}
.mg-mymemes img{width:100%;height:64px;object-fit:cover;border-radius:6px;cursor:pointer}
.mg-saved{margin-top:16px;border-top:1px solid #33353d;padding-top:10px}
@media (max-width:900px){
  .mg-main{flex-wrap:wrap;overflow-y:auto}
  .mg-rail{flex-direction:row;width:100%;order:3;justify-content:space-around}
  .mg-panel{width:100%;order:2;max-height:300px}
  .mg-inspector{width:100%;order:4;border-left:0;border-top:1px solid #33353d}
  .mg-stage{order:1;width:100%;min-height:46vh}
}

/* Phase 2 — Animated panel */
.mg-vidpreview{width:100%;border-radius:8px;margin:8px 0;background:#000}
.mg-num{width:64px}
.mg-animprog{margin-top:10px}
.mg-animbar{height:10px;border-radius:999px;background:#26262c;border:1px solid #3a3a41;overflow:hidden}
.mg-animbar #mgAnimBarFill{height:100%;width:0%;background:#4f46e5;border-radius:999px;transition:width .25s ease}
.mg-psec[data-sec="anim"] .mg-ibtn:disabled{opacity:.45;cursor:not-allowed}