*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#0a0b0f;--bg2:#11131a;--card:#161922;--border:#232733;--border2:#2d3340;--text:#e8eaf0;--dim:#7a8190;--accent:#e84393;--hover:#fd79a8;--green:#2ecc71;--r:16px}
body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;overflow:hidden;height:100vh}
.navbar{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1.5rem;border-bottom:1px solid var(--border);position:fixed;top:0;left:0;right:0;background:rgba(10,11,15,.85);backdrop-filter:blur(12px);z-index:100}
.navbar .brand{font-weight:800;color:var(--text);text-decoration:none;font-size:1rem;display:flex;align-items:center;gap:.4rem}
.navbar .nav-links{display:flex;gap:.8rem;align-items:center}
.navbar .nav-links a{color:var(--dim);text-decoration:none;font-size:.78rem;transition:color .2s;min-height:40px;display:inline-flex;align-items:center}
.navbar .nav-links a:hover,.navbar .nav-links a.active{color:var(--hover)}

canvas{display:block;cursor:crosshair}

.toolbar{position:fixed;top:52px;left:50%;transform:translateX(-50%);background:rgba(22,25,34,.9);backdrop-filter:blur(12px);border:1px solid var(--border2);border-radius:12px;padding:.5rem .75rem;display:flex;gap:.4rem;align-items:center;z-index:90;flex-wrap:wrap;justify-content:center;max-width:95vw}
.tool-btn{background:var(--bg2);border:1px solid var(--border2);border-radius:8px;padding:.45rem .7rem;font-size:.78rem;color:var(--dim);cursor:pointer;transition:all .15s;font-family:inherit;display:flex;align-items:center;gap:.3rem;white-space:nowrap}
.tool-btn:hover{border-color:var(--accent);color:var(--text)}
.tool-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}
.tool-btn .emoji{font-size:1rem}
.tool-divider{width:1px;height:24px;background:var(--border2);margin:0 .2rem}
.tool-label{font-size:.7rem;color:var(--dim);text-transform:uppercase;letter-spacing:.05em;margin-right:.2rem}

.hint-overlay{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;z-index:50;animation:pulse 2s ease-in-out infinite}
.hint-overlay h1{font-size:2.5rem;background:linear-gradient(135deg,#e84393,#fd79a8,#f39c12);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.5rem}
.hint-overlay p{color:var(--dim);font-size:1.1rem}
.hint-overlay .click-hint{margin-top:1rem;font-size:.9rem;color:var(--hover);opacity:.8}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}

.counter-box{position:fixed;bottom:1rem;right:1rem;background:rgba(22,25,34,.8);backdrop-filter:blur(8px);border:1px solid var(--border2);border-radius:8px;padding:.4rem .8rem;font-size:.72rem;color:var(--dim);z-index:80}
.counter-box strong{color:var(--hover)}

.bottom-links{position:fixed;bottom:1rem;left:1rem;z-index:80;font-size:.7rem;color:var(--dim)}
.bottom-links a{color:var(--dim);text-decoration:none;margin-right:.5rem}
.bottom-links a:hover{color:var(--hover)}

.stats-footer{position:fixed;bottom:1rem;left:50%;transform:translateX(-50%);font-size:.7rem;color:var(--dim);z-index:80;opacity:.6}
.stats-footer strong{color:var(--hover)}

@media(max-width:760px){
  .navbar{padding:.4rem .8rem}
  .navbar .brand{font-size:.85rem}
  .navbar .nav-links{gap:.4rem}
  .navbar .nav-links a{font-size:.7rem}
  .toolbar{top:46px;padding:.35rem .5rem;gap:.25rem}
  .tool-btn{padding:.35rem .5rem;font-size:.7rem}
  .hint-overlay h1{font-size:1.5rem}
  .hint-overlay p{font-size:.9rem}
}