@import url(https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&family=Quicksand:wght@500;700&display=swap);body{font-family:Quicksand,sans-serif}h1,h2,h3{font-family:Fredoka,sans-serif}.coloring-modal{width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#f1f5f9}#coloring-toolbar,.coloring-header{border-bottom:1px solid #e2e8f0;background:#fff}.coloring-modal::backdrop{background:rgba(15,23,42,.75)}.coloring-container{width:100%;height:100%;display:flex;flex-direction:column}.coloring-header{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem}.coloring-close,.coloring-tool{display:flex;background:#f1f5f9;color:#334155;cursor:pointer}.coloring-close{width:2.5rem;height:2.5rem;align-items:center;justify-content:center;border:0;border-radius:999px;font-size:1.75rem;font-weight:700;line-height:1;transition:background .15s,transform .15s}.coloring-close:hover,.coloring-tool:hover{background:#e2e8f0}.coloring-close:active{transform:scale(.95)}.coloring-main{position:relative;flex:1;min-height:0;min-width:0;display:flex;flex-direction:column}#coloring-toolbar{position:relative;flex-shrink:0;width:100%;box-sizing:border-box;padding:.5rem .75rem;box-shadow:0 1px 3px rgba(15,23,42,.08);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem;z-index:20}.coloring-tool{width:2.75rem;height:2.75rem;flex:0 0 auto;flex-shrink:0;align-items:center;justify-content:center;border:0;border-radius:.75rem;font-size:1.25rem;transition:background .15s,transform .15s,box-shadow .15s}.coloring-tool:active{transform:scale(.94)}.coloring-tool.active{background:#dbeafe;box-shadow:inset 0 0 0 2px #3b82f6}.coloring-separator{width:1px;height:2rem;flex-shrink:0;background:#e2e8f0;margin:0 .25rem}#coloring-workspace,.color-palette{min-width:0;width:100%;display:flex;box-sizing:border-box}.color-palette{flex:1 1 100%;flex-wrap:wrap;align-items:center;justify-content:center;gap:.45rem;padding-top:.25rem}.color-palette-button{width:2rem;height:2rem;flex:0 0 auto;border:2px solid #fff;border-radius:999px;box-shadow:0 1px 3px rgba(15,23,42,.25);cursor:pointer;transition:transform .15s,box-shadow .15s}.color-palette-button:hover{transform:scale(1.1)}.color-palette-button.active{transform:scale(1.15);box-shadow:0 0 0 2px #3b82f6,0 2px 5px rgba(15,23,42,.25)}#coloring-workspace{flex:1;min-height:0;align-items:center;justify-content:center;overflow:auto;padding:16px}#canvas-wrapper{position:relative;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.12);border-radius:12px;overflow:hidden;width:auto;max-width:none;flex-shrink:0}#coloring-canvas{display:block;width:auto;height:auto;max-width:calc(100vw - 32px);max-height:calc(100vh - 180px);touch-action:none;cursor:crosshair}@media (max-width:768px){#coloring-toolbar{padding:.4rem .5rem;gap:.4rem}.coloring-tool{width:2.5rem;height:2.5rem;font-size:1.1rem}.coloring-separator{height:1.75rem}.color-palette{gap:.35rem}.color-palette-button{width:1.8rem;height:1.8rem}#coloring-workspace{padding:8px;overflow:auto;align-items:center;justify-content:center}#canvas-wrapper{width:auto;max-width:none;flex-shrink:0}#coloring-canvas{width:auto;height:auto;max-width:calc(100vw - 16px);max-height:calc(100vh - 190px)}}@media (max-width:480px){.coloring-header{padding:.5rem .75rem}.coloring-header h2{font-size:1rem}.coloring-close{width:2.25rem;height:2.25rem;font-size:1.5rem}#coloring-toolbar{padding:.4rem;gap:.35rem;justify-content:center}.coloring-tool{width:2.35rem;height:2.35rem;border-radius:.65rem;font-size:1rem}.coloring-separator{display:none}.color-palette{flex:1 1 100%;width:100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.35rem;padding:.2rem 0 .1rem;overflow:hidden}.color-palette-button{width:1.7rem;height:1.7rem}#coloring-workspace{padding:6px;overflow:auto;align-items:center;justify-content:center}#canvas-wrapper{width:auto;max-width:none;border-radius:8px;flex-shrink:0}#coloring-canvas{width:auto;height:auto;max-width:calc(100vw - 12px);max-height:calc(100vh - 190px)}}@media (max-width:360px){.coloring-tool{width:2.15rem;height:2.15rem;font-size:.95rem}.color-palette-button{width:1.55rem;height:1.55rem}#coloring-workspace{padding:4px}#coloring-canvas{max-width:calc(100vw - 8px);max-height:calc(100vh - 190px)}}