*{margin:0;padding:0;box-sizing:border-box}
:root{
--bg:#fafaf5;--fg:#000;--acc:#ffeb3b;--acc2:#00ff88;
--border:3px solid #000;--shadow:6px 6px 0 #000;
--ease: cubic-bezier(.25,.1,.25,1);
--bounce: cubic-bezier(.34,1.56,.64,1);
}
html{scroll-behavior:smooth}
body{font-family:'Courier New',monospace;background:var(--bg);color:var(--fg);min-height:100vh;padding:1rem;font-weight:700;line-height:1.4;-webkit-font-smoothing:antialiased}
.wrap{max-width:1200px;margin:0 auto}

/* ===== BETA WARNING BANNER ===== */
.beta-banner{
  background:#fff3cd;
  border:2px solid #ffc107;
  color:#856404;
  padding:.75rem 1rem;
  margin-bottom:1rem;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.9rem;
  font-weight:600;
  box-shadow:var(--shadow);
}

/* ===== HEADER ===== */
header{display:flex;align-items:center;justify-content:space-between;border:var(--border);padding:.75rem 1rem;box-shadow:var(--shadow);background:#fff;margin-bottom:1.25rem;position:sticky;top:.5rem;z-index:50;will-change:transform;gap:.5rem}
.logo{font-size:1.2rem;letter-spacing:-1px;cursor:pointer;user-select:none;flex-shrink:0}
.logo span{background:var(--acc);padding:0 .3rem}
.search-wrap{max-width:240px;position:relative;margin-left:auto}
.search-icon{position:absolute;left:6px;top:50%;transform:translateY(-50%);width:14px;height:14px;z-index:1;pointer-events:none;color:#666}
.search-input{width:100%;padding:.35rem .5rem .35rem 1.7rem;border:2px solid #000;font-family:inherit;font-size:.7rem;font-weight:700;background:#fafaf5;outline:none;box-shadow:2px 2px 0 #000;transition:box-shadow .12s var(--ease)}
.search-input:focus{box-shadow:4px 4px 0 #000;background:#fff}
.search-input::placeholder{font-weight:400;color:#999}
.search-results{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border:2px solid #000;box-shadow:4px 4px 0 #000;z-index:100;max-height:360px;overflow-y:auto;margin-top:4px}
.search-results.on{display:block;animation:fadeIn .12s var(--ease)}
.search-results .sr{display:flex;align-items:center;gap:.4rem;padding:.5rem .6rem;cursor:pointer;font-size:.75rem;border-bottom:1px solid #eee;transition:background .1s var(--ease)}
.search-results .sr:last-child{border-bottom:none}
.search-results .sr:hover{background:var(--acc)}
.search-results .sr .srn{font-weight:700}
.search-results .sr .srd{font-weight:400;color:#666;margin-left:auto;font-size:.65rem}
.hamb{width:44px;height:44px;border:var(--border);background:var(--acc);cursor:pointer;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;box-shadow:3px 3px 0 #000;transition:transform .12s var(--ease), box-shadow .12s var(--ease)}
.hamb:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 #000}
.hamb:active{transform:translate(1px,1px);box-shadow:1px 1px 0 #000;transition-duration:.05s}
.hamb span{width:22px;height:3px;background:#000;display:block;transition:transform .2s var(--bounce), opacity .15s var(--ease)}
.hamb.on span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.hamb.on span:nth-child(2){opacity:0}
.hamb.on span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ===== NAV OVERLAY ===== */
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:40;will-change:opacity}
.overlay.on{display:block;animation:fadeIn .2s var(--ease)}
nav{position:fixed;top:0;right:0;height:100vh;width:min(360px,90vw);background:#fff;border-left:var(--border);box-shadow:-6px 0 0 #000;padding:5rem 1rem 1rem;overflow-y:auto;z-index:55;transform:translateX(100%);transition:transform .3s var(--bounce);will-change:transform}
nav.on{transform:translateX(0)}
nav .group{margin-bottom:1rem}
nav .gn{font-size:.7rem;letter-spacing:2px;background:#000;color:#fff;padding:.25rem .5rem;display:inline-block;margin-bottom:.4rem}
nav .gi{display:flex;align-items:center;gap:.5rem;width:100%;text-align:left;background:#fff;border:2px solid #000;padding:.45rem .6rem;font-family:inherit;font-size:.8rem;font-weight:700;cursor:pointer;margin-bottom:.3rem;box-shadow:3px 3px 0 #000;transition:transform .1s var(--ease), box-shadow .1s var(--ease), background .1s var(--ease)}
nav .gi:hover{background:var(--acc);transform:translate(-1px,-1px);box-shadow:4px 4px 0 #000}
nav .gi:active{transform:translate(1px,1px);box-shadow:1px 1px 0 #000;transition-duration:.05s}
nav .gi.on{background:var(--acc2)}
nav .gi .ico{display:inline-block;width:1.5rem}

/* ===== PAGES ===== */
.page{display:none}
.page.on{display:block;animation:pageIn .35s var(--bounce)}
@keyframes pageIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ===== HERO ===== */
.hero{border:var(--border);padding:1.5rem;box-shadow:var(--shadow);background:#fff;margin-bottom:1.5rem;position:relative;overflow:hidden}
.hero.sm{padding:1rem;margin-bottom:1rem}
.hero-badge{display:inline-block;background:#000;color:var(--acc);padding:.2rem .5rem;font-size:.65rem;letter-spacing:2px;margin-bottom:.75rem}
.hero h1{font-size:clamp(1.6rem,5vw,2.6rem);line-height:1;letter-spacing:-2px;margin-bottom:.5rem}
.hero h1 b{background:var(--acc);padding:0 .2rem}
.hero p.lede{font-size:.9rem;font-weight:400;line-height:1.5;margin-bottom:1rem;max-width:600px}
.hero-row{gap:.5rem}
.hero-row .btn{flex:1;max-width:220px}

/* ===== FEATURES ===== */
.features{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.75rem;margin-bottom:1.5rem}
.feat{background:#fff;border:var(--border);padding:1rem;box-shadow:var(--shadow);transition:transform .15s var(--ease), box-shadow .15s var(--ease);will-change:transform}
.feat:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 #000}
.feat .fic{display:flex;align-items:center;margin-bottom:.3rem;height:24px}
.feat h3{font-size:.85rem;letter-spacing:1px;margin-bottom:.3rem}
.feat p{font-size:.75rem;font-weight:400;line-height:1.4}

/* ===== SECTION HEADERS ===== */
h2.sec{font-size:1rem;letter-spacing:1px;margin:1.5rem 0 .5rem;display:flex;align-items:center;gap:.5rem}
h2.sec::before{content:"";display:inline-block;width:14px;height:14px;background:var(--acc);border:2px solid #000}
.note{border:2px dashed #000;padding:.6rem .75rem;font-size:.75rem;background:#fff;margin-bottom:1rem;font-weight:400}

/* ===== MENU GRID ===== */
.menu{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.75rem;margin-bottom:.5rem}
.card{background:#fff;border:var(--border);padding:1rem;cursor:pointer;box-shadow:var(--shadow);transition:transform .15s var(--bounce), box-shadow .15s var(--ease), background .1s var(--ease);text-align:left;will-change:transform}
.card.big{padding:1.5rem}
.card:hover{background:var(--acc);transform:translate(-3px,-3px);box-shadow:9px 9px 0 #000}
.card:active{transform:translate(0,0);box-shadow:3px 3px 0 #000;transition-duration:.05s}
.card .ic{display:flex;align-items:center;margin-bottom:.3rem;height:22px;color:inherit}
.card .nm{font-size:.85rem}
.card .ds{font-size:.65rem;font-weight:400;opacity:.7;margin-top:.2rem}
.card.dark{background:#000;color:#fff}
.card.dark:hover{background:var(--acc);color:#000}

/* ===== ICON HELPER ===== */
.ficon{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;line-height:0;flex-shrink:0}
.ficon svg{display:block;width:100%;height:100%}

/* ===== EDITOR ===== */
.editor{display:grid;grid-template-columns:200px 1fr;gap:1rem}
.tbar{background:#fff;border:var(--border);box-shadow:var(--shadow);padding:.75rem;display:flex;flex-direction:column;gap:.4rem;height:fit-content;position:sticky;top:5rem}
.tbtn{display:flex;align-items:center;gap:.4rem;background:#fff;border:2px solid #000;padding:.5rem;font-family:inherit;font-size:.75rem;font-weight:700;cursor:pointer;text-align:left;box-shadow:2px 2px 0 #000;transition:transform .1s var(--ease), box-shadow .1s var(--ease), background .1s var(--ease);will-change:transform}
.tbtn:hover{background:var(--acc);transform:translate(-1px,-1px);box-shadow:3px 3px 0 #000}
.tbtn:active{transform:translate(1px,1px);box-shadow:0 0 0 #000;transition-duration:.05s}
.tbtn.on{background:var(--acc2)}
.tbtn.danger:hover{background:#ff4444;color:#fff}

.canvas-wrap{background:#fff;border:var(--border);box-shadow:var(--shadow);padding:1rem;min-height:400px}
.drop{border:3px dashed #000;padding:2rem;text-align:center;cursor:pointer;background:#fff;margin-bottom:.75rem;min-height:240px;display:flex;align-items:center;justify-content:center;transition:background .15s var(--ease);will-change:background}
.drop:hover,.drop.over{background:var(--acc)}
.drop input{display:none}
.drop-c{font-size:.9rem;text-align:center}
.muted{color:#666;font-weight:400}
.canvas-host{position:relative;display:inline-block;max-width:100%;margin-bottom:.75rem}
canvas{max-width:100%;height:auto;border:2px solid #000;background:#f0f0f0;display:block;image-rendering:pixelated;touch-action:none}

/* ===== CONTROLS ===== */
.ctrls{margin-bottom:.75rem}
.ctrls label{display:block;font-size:.7rem;letter-spacing:1px;margin-bottom:.25rem;margin-top:.5rem}
.ctrls input[type=range],.ctrls input[type=number],.ctrls input[type=text],.ctrls select,
.ctrls textarea,textarea.cb{width:100%;padding:.4rem;border:2px solid #000;font-family:inherit;font-size:.8rem;background:#fff;font-weight:700}
.ctrls input[type=range]{padding:0;border-width:2px;accent-color:#000}
.ctrls input[type=checkbox]{width:auto;transform:scale(1.3);margin-right:.4rem;accent-color:#000}
.ctrls textarea,textarea.cb{resize:vertical;min-height:100px}

/* ===== ROWS ===== */
.row{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;margin-top:.5rem}
.two{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}

/* ===== BUTTONS ===== */
.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .8rem;border:2px solid #000;background:var(--acc);font-family:inherit;font-size:.8rem;font-weight:700;cursor:pointer;box-shadow:2px 2px 0 #000;transition:transform .1s var(--ease), box-shadow .1s var(--ease);text-decoration:none;color:#000;text-align:center;will-change:transform}
.btn:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 #000}
.btn:active{transform:translate(1px,1px);box-shadow:1px 1px 0 #000;transition-duration:.05s}
.btn.dark{background:#000;color:#fff}
.btn.go{width:100%;padding:.7rem;font-size:.9rem;margin-top:.5rem}
.btn.sm{padding:.35rem .55rem;font-size:.7rem}

/* ===== TOOL PAGE ===== */
.tool-page{background:#fff;border:var(--border);box-shadow:var(--shadow);padding:1.25rem}
.tool-page h2{display:flex;align-items:center;gap:.5rem;font-size:1.2rem;margin-bottom:.75rem;padding-bottom:.5rem;border-bottom:2px solid #000;letter-spacing:-1px}
.back{background:#fff;border:2px solid #000;font-family:inherit;font-weight:700;cursor:pointer;margin-bottom:1rem;fontsize:.85rem;padding:.4rem .7rem;box-shadow:3px 3px 0 #000;transition:transform .1s var(--ease), box-shadow .1s var(--ease), background .1s var(--ease)}
.back:hover{background:var(--acc);transform:translate(-1px,-1px);box-shadow:4px 4px 0 #000}
.back:active{transform:translate(1px,1px);box-shadow:1px 1px 0 #000;transition-duration:.05s}

/* ===== INFO PAGES (privacy / terms / about) ===== */
#page-privacy .tool-page h3,
#page-terms .tool-page h3,
#page-about .tool-page h3{font-size:.9rem;margin-top:1.2rem;margin-bottom:.4rem;background:#000;color:#fff;display:inline-block;padding:.15rem .5rem;letter-spacing:.5px}
#page-privacy .tool-page p,
#page-terms .tool-page p,
#page-about .tool-page p{margin-bottom:.6rem;font-weight:400;font-size:.8rem;line-height:1.5}
#page-privacy .tool-page ul,
#page-terms .tool-page ul,
#page-about .tool-page ul{margin-bottom:.6rem;padding-left:1.2rem;font-weight:400;font-size:.8rem;line-height:1.6}
#page-privacy .tool-page a,
#page-terms .tool-page a,
#page-about .tool-page a{color:#000;background:var(--acc);text-decoration:none;padding:0 .15rem}
#page-privacy .tool-page a:hover,
#page-terms .tool-page a:hover,
#page-about .tool-page a:hover{text-decoration:underline}

/* ===== DOWNLOAD DISCLAIMER ===== */
.dl-disclaimer{display:flex;align-items:flex-start;gap:.6rem;background:#fff3cd;border:2px solid #ffc107;padding:.75rem;margin-bottom:.5rem;font-size:.75rem;font-weight:400;line-height:1.4}
.dl-disclaimer .dl-disc-icon{font-size:1.2rem;line-height:1;flex-shrink:0;margin-top:1px}
.dl-disclaimer b{font-weight:700}

/* ===== CONSENT POPUP ===== */
.consent-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:100;align-items:center;justify-content:center;padding:1rem}
.consent-overlay.on{display:flex;animation:fadeIn .25s var(--ease)}
.consent-modal{background:#fff;border:var(--border);box-shadow:var(--shadow);padding:2rem;max-width:500px;width:100%;text-align:center}
.consent-modal h2{font-size:1.5rem;letter-spacing:-2px;margin-bottom:.75rem}
.consent-modal h2 span{background:var(--acc);padding:0 .3rem}
.consent-modal>p{font-size:.8rem;font-weight:400;margin-bottom:1rem;color:#444}
.consent-body{background:#f5f5f0;border:2px solid #000;padding:1rem;margin-bottom:1rem;text-align:left}
.consent-body>p{font-size:.75rem;font-weight:400;margin-bottom:.75rem}
.consent-links{display:flex;gap:.5rem;margin-bottom:.75rem}
.consent-links .btn{flex:1;font-size:.7rem;padding:.4rem;justify-content:center}
.consent-check{display:flex;align-items:flex-start;gap:.5rem;cursor:pointer;font-size:.75rem;font-weight:400;line-height:1.4}
.consent-check input[type=checkbox]{width:16px;height:16px;min-width:16px;margin-top:2px;accent-color:#000;cursor:pointer}
.consent-check span{user-select:none}
#consent-continue{width:100%;margin-top:0}
#consent-continue:disabled{opacity:.4;cursor:not-allowed;transform:none!important;box-shadow:2px 2px 0 #000!important}

/* ===== SEO CONTENT BLOCK ===== */
.seo-block{padding:1rem 0 0;margin-top:1.5rem;border-top:2px solid #000;font-weight:400;font-size:.8rem;line-height:1.6}
.seo-block p{margin-bottom:.8rem}
.seo-block h3{font-size:.9rem;margin-top:1.5rem;margin-bottom:.6rem;background:#000;color:#fff;display:inline-block;padding:.15rem .5rem;letter-spacing:.5px;font-weight:700}
.seo-block h4{font-size:.8rem;margin-top:1rem;margin-bottom:.3rem;font-weight:700;background:var(--acc);display:inline-block;padding:.1rem .4rem}
.seo-block a{color:#000;text-decoration:underline}
.seo-block a:hover{background:var(--acc)}
.seo-block b{font-weight:700}
.seo-block .related-tools{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}
.seo-block .related-tools .btn{font-size:.7rem;padding:.3rem .5rem}

/* ===== INFO BOXES ===== */
.info{font-size:.75rem;padding:.5rem;border:2px solid #000;background:#f5f5f0;margin:.3rem 0;font-weight:400}
.kbd{background:#000;color:#fff;padding:.1rem .3rem;font-size:.7rem;border-radius:2px}

/* ===== COLOR PICKER PREVIEW ===== */
.color-preview{height:50px;border:3px solid #000;margin:.5rem 0}

/* ===== FOOTER ===== */
footer{margin-top:2rem;padding:1rem;border:var(--border);background:#fff;box-shadow:var(--shadow);font-size:.75rem;text-align:center}
footer .muted{font-size:.65rem;margin-top:.2rem}

/* ===== MOBILE ===== */
@media(max-width:700px){
.editor{grid-template-columns:1fr}
.tbar{position:static;flex-direction:row;flex-wrap:wrap;overflow-x:auto;padding:.5rem}
.tbtn{flex:0 0 auto;font-size:.7rem;padding:.35rem .5rem}
.menu{grid-template-columns:repeat(2,1fr)}
.features{grid-template-columns:1fr 1fr}
.hero-row{flex-direction:column;align-items:stretch}
.hero-row .btn{max-width:none}
}
@media(max-width:400px){
.menu{grid-template-columns:1fr 1fr}
.features{grid-template-columns:1fr}
}