.dynamic-eye-wrapper{flex:1;display:flex;justify-content:center;align-items:center;position:relative}.dynamic-eye-image{display:flex;align-self:center;justify-content:center;align-items:center;position:absolute;pointer-events:none}.dynamic-eye-pupil{transition:top .2s ease-out,left .2s ease-out}.cell-background{flex:1;display:flex;justify-content:center;align-items:center;width:48px;height:48px;overflow:hidden}.cell-touchable{flex:1;display:flex;justify-content:center;align-items:center;position:relative}.cell-touchable[style*="cursor: pointer"]{cursor:pointer}.cell-touchable[style*="cursor: pointer"]:active{opacity:.5}.cell-animated-container{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center}.cell-image{position:absolute;top:0;left:0;display:flex;align-self:center;justify-content:center;align-items:center;pointer-events:none}.export-button-container{position:relative;display:inline-block}.export-button{padding:12px 24px;border-radius:24px;border:solid 2px;cursor:pointer;font-size:14px;font-weight:600;background-color:#fff;-webkit-user-select:none;user-select:none;transition:opacity .2s;white-space:nowrap;display:flex;align-items:center;gap:8px}.export-button-primary{margin-left:10px}.export-button:hover{opacity:.8}.export-button:active{opacity:.5}.export-button:disabled{opacity:.3;cursor:not-allowed}.export-menu{position:absolute;top:100%;right:0;margin-top:8px;background:#fff;border-radius:12px;box-shadow:0 4px 12px #00000026;overflow:hidden;z-index:1000;min-width:180px}.export-menu-item{display:block;width:100%;padding:12px 20px;border:none;border-bottom:1px solid #f0f0f0;background:#fff;cursor:pointer;font-size:14px;font-weight:500;text-align:left;transition:background .2s}.export-menu-item:last-child{border-bottom:none}.export-menu-item:hover{background:#f8f8f8}.export-menu-item:active{background:#e8e8e8}@media (max-width: 640px){.export-button{width:40px;height:40px;padding:0;justify-content:center;border-radius:8px;margin-left:0}.export-button-text{display:none}.export-button-primary{margin-left:0}}.control-buttons-group{display:flex;gap:8px;align-items:center}@media (max-width: 640px){.control-buttons-group{gap:6px}.control-buttons-group button{width:36px!important;height:36px!important}}.icon-brush-button{padding:5px;border:solid 1px #000;margin:2px 2px 10px;width:50px;height:50px;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none}.icon-brush-button:active{opacity:.5}.icon-brush-button.active{border-color:orange}.icon-brush-button.erasor{border-style:dashed;border-radius:1px}.icon-image{width:40px;height:40px;pointer-events:none}.background-brush-button{padding:5px;border:solid 2px #000;margin:2px;width:50px;height:50px;border-radius:5px;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none}.background-brush-button:active{opacity:.5}.background-brush-button.active{border-color:orange}.info-button{width:48px;height:48px;border-radius:50%;border:solid 2px;cursor:pointer;display:flex;justify-content:center;align-items:center;margin-left:5px;background-color:#fff;-webkit-user-select:none;user-select:none}.info-button:active{opacity:.5}.info-image{width:32px;height:32px;margin-left:2px;border-radius:50%;pointer-events:none}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;z-index:1000;overflow-y:auto}.modal-scroll{min-height:100%;display:flex;align-items:center;justify-content:center;padding:20px}.modal-centered{display:flex;justify-content:center;align-items:center;margin-top:22px}.modal-view{background-color:#fff;border-radius:5px;padding:20px;display:flex;flex-direction:column;align-items:center;box-shadow:0 2px 8px #00000040;width:95%;max-width:600px;margin-bottom:20px}.modal-close-container{display:flex;align-items:flex-end;justify-content:flex-end;width:100%;margin-bottom:20px}.close-button{border-radius:20px;padding:20px;min-width:60px;width:80px;cursor:pointer;text-align:center;box-shadow:0 2px 4px #0003}.close-button:active{opacity:.5}.close-text{color:#fff;font-weight:700;font-size:30px;margin:0;padding:0}.sum-row{display:flex;flex-direction:row;align-items:center;margin-bottom:22px}.sum-text{font-size:40px;font-weight:700;color:#000;margin:0 10px}.cell{margin:5px 14px;height:48px;width:48px;border:2px solid black;box-shadow:0 3px 6px #0000004d;display:flex;align-items:center;justify-content:center;background-color:#fff}.cell.no-border{border-width:0;box-shadow:none}.cell.erasor-cell{border-style:dashed;background-color:#fff;border-color:#ccc}.background-cell{margin:5px 14px;border:2px solid black;box-shadow:0 3px 6px #0000004d;width:48px;height:48px;border-radius:6px}.image{background-color:#fff;height:44px;width:44px;object-fit:cover}.hud{background-color:#fff;display:flex;justify-content:center;align-items:center;flex-direction:row;flex-wrap:wrap;padding:5px;width:100%}.hud-back-link{margin-left:auto;padding:8px 12px;font-size:14px;color:#333;text-decoration:none;white-space:nowrap}.hud-back-link:hover{color:#000;text-decoration:underline}.grid{overflow:visible;width:max-content;margin-left:auto;margin-right:auto}.grid-export-controls{display:flex;flex-direction:column;align-items:center;gap:12px;margin-left:auto;margin-right:auto;width:100%;justify-content:center;margin-bottom:1rem;padding:8px;max-width:100%}.control-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center}.helpalot-link{display:flex;align-items:center;gap:8px;padding:6px 12px;height:40px;text-decoration:none;color:#333;font-size:14px;font-weight:600;border:2px solid #ddd;border-radius:24px;background-color:#fff;transition:all .2s;white-space:nowrap}.helpalot-link:hover{border-color:#666;background-color:#fafafa}.helpalot-logo{width:40px;height:auto;border-radius:4px}.grid-save-controls{display:flex;justify-content:center;margin-bottom:3rem}.grid-inner{border:2px solid #000;border-radius:2px;display:flex;justify-content:center;align-items:center;position:relative}.grid-cells{display:grid}@media (max-width: 640px){.grid-export-controls{gap:10px;padding:8px}.control-row{gap:8px;width:100%;justify-content:center}.helpalot-link{width:100%;max-width:400px;justify-content:center;padding:10px 16px}.helpalot-logo{width:36px}}@media (min-width: 641px) and (max-width: 768px){.grid-export-controls{gap:10px}.helpalot-link{font-size:13px;padding:8px 14px}.helpalot-logo{width:36px}}.silly-faces-container{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;max-width:600px;margin-left:auto;margin-right:auto;margin-top:0}.silly-faces-container.app-container{height:100vh;width:100vw;display:flex;flex-direction:column}.silly-faces-container:not(.app-container){display:block;width:auto;height:auto}.silly-faces-container:not(.app-container) .app-hud{position:relative;margin-top:20px;border-top:1px solid #ccc;background-color:#fff}.silly-faces-container:not(.app-container):has(.grid:only-child){display:inline-block}.silly-faces-container .app-scroll-container{flex:1;overflow:auto}.silly-faces-container .app-scroll-horizontal{width:100%;height:100%;overflow-x:auto;overflow-y:auto}.silly-faces-container .app-scroll-vertical{display:flex;justify-content:center;align-items:center;min-height:100%;padding:20px;flex-direction:column}.silly-faces-container.app-container .app-hud{position:fixed;bottom:0;left:0;right:0;margin-top:10px;width:100%;border-top:1px solid #ccc;background-color:#fff}.silly-faces-tiny-container{display:inline-block}.silly-faces-full-container,.silly-faces-medium-container{display:block;max-width:100%;width:fit-content;margin:0 auto}.silly-faces-tiny-container .silly-faces-container,.silly-faces-full-container .silly-faces-container,.silly-faces-medium-container .silly-faces-container{margin-top:0;width:fit-content;max-width:100%}.silly-faces-full-container .grid,.silly-faces-medium-container .grid{width:fit-content;max-width:100%}.silly-faces-tiny-container .grid-inner,.silly-faces-full-container .grid-inner,.silly-faces-medium-container .grid-inner{box-sizing:border-box;border:none;border-radius:12px;overflow:hidden}.silly-faces-full-container .grid-cells,.silly-faces-medium-container .grid-cells{width:100%}
