*{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%;overflow:hidden}body{color:#333;-webkit-font-smoothing:antialiased;background-color:#fff;font-family:Calibri,sans-serif}.collection-container{border:1px solid #000;flex-grow:1;width:95vw;max-width:1200px;max-height:80vh;margin-top:10px;padding:15px;overflow-y:auto}.collection-container::-webkit-scrollbar{width:12px}.collection-container::-webkit-scrollbar-thumb{background:#000;border-left:2px solid #fff}.collection-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;width:100%;display:grid}@media (width<=400px){.collection-grid{grid-template-columns:1fr 1fr}}.cat-frame{background:#fff;border:1px solid #000;border-radius:8px;height:200px;position:relative;overflow:hidden}.cat-frame:after{content:"";z-index:4;background:#e4e4e4;border-top:2px solid #000;width:100%;height:35px;position:absolute;bottom:0;left:0}.cat-scene{z-index:5;width:110px;height:160px;position:absolute;bottom:30px;left:50%;transform:translate(-50%)}.cat-body{background:var(--cat-color,#111);z-index:2;border-radius:50% 50% 30% 30%;width:80px;height:70px;position:absolute;bottom:0;left:50%;transform:translate(-50%)}.cat-head{background:var(--cat-color,#111);z-index:3;border-radius:50%;justify-content:center;align-items:center;width:90px;height:84px;display:flex;position:absolute;bottom:52px;left:50%;transform:translate(-50%)}.ear-left,.ear-right{border-left:16px solid #0000;border-right:16px solid #0000;border-bottom:28px solid var(--cat-color,#111);z-index:3;width:0;height:0;position:absolute;top:-19px}.ear-left{left:4px;transform:rotate(-22deg)}.ear-right{right:4px;transform:rotate(22deg)}.ear-inner-left,.ear-inner-right{z-index:4;border-bottom:18px solid #d48a8a;border-left:9px solid #0000;border-right:9px solid #0000;width:0;height:0;position:absolute;top:-14px}.ear-inner-left{left:11px;transform:rotate(-22deg)}.ear-inner-right{right:11px;transform:rotate(22deg)}.cat-face-overlay{object-fit:cover;z-index:5;background:#fff;border:2px solid #000;border-radius:50%;width:68px;height:68px;position:relative}.paw-left,.paw-right{background:var(--cat-color,#111);z-index:5;border-radius:50% 50% 40% 40%;width:26px;height:16px;position:absolute;bottom:-6px}.paw-left{left:-2px}.paw-right{right:-2px}.tail{background:var(--cat-color,#111);transform-origin:bottom;z-index:1;border-radius:7px 7px 7px 0;width:14px;height:80px;animation:3s ease-in-out infinite swing;position:absolute;bottom:42px;right:70px}@keyframes swing{0%{transform:rotate(10deg)}50%{transform:rotate(55deg)}to{transform:rotate(10deg)}}.collection-card{flex-direction:column;align-items:center;display:flex}.collection-card .cat-frame{width:100%;height:200px}.collection-cat-name{text-align:center;word-break:break-word;max-width:120px;margin-top:8px;font-size:14px;font-weight:600;line-height:1.2}.gallery-container{border:1px solid #000;flex-grow:1;width:95vw;max-width:1200px;max-height:80vh;margin-top:10px;padding:15px;overflow-y:auto}.gallery-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;width:100%;display:grid}@media (width<=400px){.gallery-grid{grid-template-columns:1fr 1fr}}.cat-card{background:#fff;border:1px solid #000;flex-direction:column;align-items:center;padding:10px;display:flex}.face-placeholder{aspect-ratio:1;border:1px solid #000;justify-content:center;align-items:center;width:100%;margin-bottom:10px;display:flex}.cat-name{text-align:center;white-space:nowrap;text-overflow:ellipsis;width:100%;margin-bottom:10px;font-family:Calibri,sans-serif;font-size:1rem;overflow:hidden}.card-actions{gap:5px;width:100%;display:flex}.action-btn{cursor:pointer;background:#fff;border:1px solid #000;justify-content:center;align-items:center;padding:4px;font-family:inherit;font-size:.9rem;display:flex}.star-btn{flex-grow:1}.gallery-container::-webkit-scrollbar{width:12px}.gallery-container::-webkit-scrollbar-thumb{background:#000;border-left:2px solid #fff}.toolbar{flex-direction:column;align-items:center;gap:12px;width:100%;margin-bottom:15px;display:flex}.controls{justify-content:center;align-items:center;gap:10px;display:flex}.size-slider-container{justify-content:center;align-items:center;gap:5px;min-width:180px;display:flex}.canvas-container{touch-action:none;background:#fff;border:2px solid #000;border-radius:50%;width:min(80vw,360px);height:min(80vw,360px);margin:10px auto;display:flex;overflow:hidden}canvas{touch-action:none;width:100%;height:100%;display:block}@media (width>=900px){.toolbar{width:320px}.main-workspace{flex-direction:row;justify-content:center;align-items:flex-start;gap:24px}.canvas-container{width:360px;height:360px;margin:0}}@media (width<=480px){.controls{flex-wrap:wrap;gap:8px}.size-slider-container{min-width:120px}.canvas-container{width:min(72vw,280px);height:min(72vw,280px)}}.app-container{flex-direction:column;justify-content:flex-start;align-items:center;width:100%;min-height:100dvh;padding:10px;display:flex;overflow-y:auto}@media (width<=480px){.drawing-header h1{font-size:1.5rem}}.drawing-header{text-align:center;margin-bottom:10px}.main-workspace{flex-direction:column;align-items:center;gap:12px;width:100%;display:flex}.footer-actions{grid-template-columns:1fr auto 1fr;align-items:end;gap:14px;width:min(760px,100%);margin-top:15px;display:grid}.footer-actions .footer-link:first-child{justify-self:end}.footer-actions .footer-link:last-child{justify-self:start}.dev-credit{color:#2e2d2d;letter-spacing:.04em;text-align:center;width:min(760px,100%);margin-top:10px;margin-bottom:0;font-size:.75rem}@media (width<=480px){.footer-actions{grid-template-columns:1fr;justify-items:center;gap:12px}.footer-actions .footer-link:first-child,.footer-actions .footer-link:last-child{justify-self:center}}.action-stack{flex-direction:column;align-items:center;gap:8px;display:flex}.cat-name-input{text-align:center;border:1px solid #000;border-radius:0;width:min(240px,40vw);padding:4px 8px;font-family:Calibri,sans-serif}.footer-link{color:#000;cursor:pointer;padding-bottom:5px;text-decoration:underline}button{cursor:pointer;background:#fff;border:1px solid #000;border-radius:0;padding:4px 12px;font-family:inherit}.btn-main{font-weight:700}.error-toast{color:#fff;z-index:1000;text-align:center;background:#f44;border-radius:4px;max-width:300px;padding:12px 16px;position:fixed;top:120px;left:50%;transform:translate(-50%)}.tool-group{gap:5px;display:flex}.btn-tool{border:1px solid #000;font-weight:400}.btn-tool.active{border:2px solid #000;font-weight:700}.undo-btn{margin-left:8px}.redo-btn{margin-left:4px}.color-palette{align-items:center;gap:8px;margin-top:8px;display:flex}.color-swatch{cursor:pointer;border:1px solid #999;border-radius:6px;width:26px;height:26px;padding:0}.color-swatch.selected{border:3px solid #000}.size-label{font-size:14px}