*,: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;pointer-events:none;background:#f5f5f5;border:3px solid #1a1a1a;padding:10px 20px;font-size:1rem;font-weight:900;transition:opacity .4s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:4px 4px #1a1a1a}.hint.hidden,.edit-hint{opacity:0}.edit-hint.show{animation:2.2s ease-in-out forwards hintPop}@keyframes hintPop{0%{opacity:0;transform:translate(-50%,-50%)scale(.85)}12%{opacity:1;transform:translate(-50%,-50%)scale(1.02)}20%{transform:translate(-50%,-50%)scale(1)}80%{opacity:1;transform:translate(-50%,-50%)scale(1)}to{opacity:0;transform:translate(-50%,-50%)scale(.95)}}.bottom-controls{z-index:20;align-items:center;gap:16px;display:flex;position:absolute;bottom:24px;left:50%;transform:translate(-50%)}.palette-btn{cursor:pointer;background:linear-gradient(135deg,#000 50%,#fff 50%);border:3px solid #1a1a1a;border-radius:50%;width:56px;height:56px;box-shadow:3px 3px #1a1a1a}.palette-btn:active{transform: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:rotate(0)scale(1)}50%{transform:rotate(180deg)scale(.85)}to{transform:rotate(360deg)scale(1)}}.triangle-btn{cursor:pointer;filter:drop-shadow(3px 3px #1a1a1a);width:56px;height:56px;color:var(--tri-icon,#f5f5f5);background:0 0;border:none;justify-content:center;align-items:center;padding:0;display:flex;position:relative}.triangle-btn .tri-shape{fill:var(--tri-color,var(--color-b,#1a1a1a));stroke:#1a1a1a;stroke-width:2px}.triangle-btn svg{pointer-events:none}.triangle-btn.pop{animation:.4s cubic-bezier(.34,1.56,.64,1) forwards tri-pop}@keyframes tri-pop{0%{transform:scale(1)translateY(0)}30%{transform:scale(.75)translateY(3px)}60%{transform:scale(1.15)translateY(-4px)}to{transform:scale(1)translateY(0)}}.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}}