*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--color-a:#000;--color-b:#fff;--text:#1a1a1a;--border:3px solid #1a1a1a;--radius:0px;--shadow:4px 4px 0px #1a1a1a;--font:"Arial Black", "Arial", sans-serif}html,body{height:100%;color:var(--text);font-family:var(--font);touch-action:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;background:#fff;overflow:hidden}#app{flex-direction:column;height:100dvh;display:flex;position:relative}.header{border-bottom:var(--border);background:var(--color-b);z-index:10;justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.logo{letter-spacing:.05em;color:var(--logo-color,#f5f5f5);font-family:Comfortaa,cursive;font-size:1.5rem;font-weight:700}.btn-group{gap:8px;display:flex}.btn{font-family:var(--font);letter-spacing:.08em;background:var(--color-a);color:var(--btn-color,#f5f5f5);border:3px solid var(--color-a);border-radius:var(--radius);box-shadow:var(--shadow);cursor:pointer;padding:8px 16px;font-size:.75rem;font-weight:900;transition:transform .1s,box-shadow .1s}.btn:active{transform:translate(2px,2px);box-shadow:2px 2px #1a1a1a}.canvas-wrap{border:none;flex:1 1 0;height:100%;min-height:0;position:relative;overflow:hidden}#canvas{cursor:crosshair;width:100%;height:100%;display:block}.hint{letter-spacing:.15em;color:#1a1a1a;opacity:.4;pointer-events:none;font-size:1.2rem;font-weight:900;transition:opacity .5s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.hint.hidden{opacity:0}.palette-btn{cursor:pointer;z-index:20;background:linear-gradient(135deg,#000 50%,#fff 50%);border:3px solid #1a1a1a;border-radius:50%;width:56px;height:56px;position:absolute;bottom:24px;left:50%;transform:translate(-50%);box-shadow:3px 3px #1a1a1a}.palette-btn:active{transform:translate(-50%)translate(2px,2px);box-shadow:1px 1px #1a1a1a}.palette-btn.spinning{pointer-events:none;animation:.4s cubic-bezier(.4,0,.2,1) forwards palette-spin}@keyframes palette-spin{0%{transform:translate(-50%)rotate(0)scale(1)}50%{transform:translate(-50%)rotate(180deg)scale(.85)}to{transform:translate(-50%)rotate(360deg)scale(1)}}.share-overlay{z-index:100;background:#000000d9;justify-content:center;align-items:center;transition:opacity .3s;display:flex;position:fixed;inset:0}.share-overlay.hidden{display:none}.share-card{text-align:center;background:#fff;border:3px solid #1a1a1a;width:90%;max-width:320px;padding:40px 32px;box-shadow:6px 6px #1a1a1a}.share-text{font-family:var(--font);color:#1a1a1a;margin-bottom:16px;font-size:1.4rem;font-weight:900}.share-link{font-family:var(--font);color:#1a1a1a;text-underline-offset:4px;margin-bottom:28px;font-size:1.1rem;font-weight:900;text-decoration:underline;display:block}.share-link:hover{opacity:.7}.share-card .btn{width:100%}@media (width<=600px){.header{padding:10px 12px}.logo{font-size:1.1rem}.palette-btn{width:50px;height:50px;bottom:20px}}