:root{--bg:#111;--surface:#1a1a1a;--text:#fff;--accent:#4cafef;--success:#22c55e;--border:#333}html[data-theme=light]{--bg:#fff;--surface:#f2f2f2;--text:#111;--border:#ddd}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);align-items:center;min-height:100vh;font-family:system-ui,-apple-system,sans-serif;display:flex}.main-heading{text-transform:uppercase}.container.grid{grid-template:"header main"1fr"nav main""footer main"1fr/minmax(250px,30%) 1fr;align-items:center;gap:1.5rem;width:100%;max-width:1200px;min-height:90vh;margin:0 auto;padding:1rem;display:grid}header{grid-area:header}main{grid-area:main;justify-content:center;align-items:center;display:flex}nav{grid-area:nav;place-content:center;place-items:center}footer{grid-area:footer}#actions.btn-container{flex-direction:column;gap:1rem;width:100%;display:flex}.btn-container .action,.btn-container .action>button{width:100%}canvas{background:var(--surface);border-radius:12px;max-width:100%;height:auto}#meme{box-shadow:0 20px 50px #00000080}button{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:8px;padding:.8rem 1.2rem;font-weight:600;transition:all .3s}.action button:hover{filter:brightness(1.1);transform:translateY(-1px)}.action button:active{transform:scale(.96)}footer a{color:var(--accent);text-decoration:none;display:inline-block;position:relative}footer a:before{content:"";background-color:var(--text);width:0;height:1px;transition:all .3s;display:inline-block;position:absolute;bottom:0;left:0}footer a:hover:before{width:100%}button#download-meme{background:var(--success);width:100%;margin-bottom:1rem;transition:all .3s}button#download-meme:hover{filter:drop-shadow(0 0 10px var(--success))}dialog{background:0 0;border:none;border-radius:12px;outline:none;margin:auto;padding:0}dialog::backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#000c}dialog article{background:var(--surface);color:var(--text);border-radius:12px;flex-direction:column;width:480px;max-width:95vw;padding:2.5rem;display:flex;box-shadow:0 25px 50px -12px #00000080}dialog form{flex-direction:column;gap:1.5rem;display:flex}dialog h2{text-transform:capitalize;border-bottom:1px solid var(--border);margin-bottom:.5rem;padding-bottom:.75rem;font-size:1.5rem}.modal-content{flex-direction:column;gap:1.25rem;display:flex}dialog input[type=text]{background:var(--bg);border:1px solid var(--border);width:100%;color:var(--text);border-radius:8px;padding:.8rem;font-size:1rem}dialog input[type=text]:focus{border-color:var(--accent);outline:none}#preview{border:2px solid var(--border);border-radius:8px;width:100%;height:auto}.modal-content button{width:100%;padding:.9rem;font-size:1rem;background:var(--success)!important}dialog form>button[type=submit]{border:1px solid var(--border);color:var(--text);opacity:.7;background:0 0;font-size:.9rem;transition:all .2s}dialog form>button[type=submit]:hover{opacity:1;background:var(--border)}#dark-mode{background:var(--bg);cursor:pointer;border:1px solid var(--border);border-radius:8px;justify-content:space-between;align-items:center;padding:1rem;display:flex}#toggle{appearance:none;cursor:pointer;background-color:#444;border-radius:50px;flex-shrink:0;width:50px;height:26px;transition:background-color .3s;position:relative}#toggle:before{content:"";background-color:#fff;border-radius:50%;width:20px;height:20px;transition:transform .3s;position:absolute;top:3px;left:3px;box-shadow:0 2px 4px #0003}#toggle:checked{background-color:var(--success)}#toggle:checked:before{transform:translate(24px)}#toggle:hover{filter:brightness(1.2)}@media (width<=768px){.main-heading{text-align:center}.container.grid{grid-template:"header"max-content"main""nav"1fr"footer"max-content/1fr;min-height:100vh}#actions{align-items:center}footer{flex-direction:column-reverse;gap:1rem;display:flex}}