.shapes-explore-page.svelte-r88rzg{min-height:100vh;background:var(--color-light-cream);padding-bottom:var(--space-xxl)}.hero-banner.svelte-r88rzg{position:relative;background:linear-gradient(135deg,#e5f0ff,#e5ffe5,#fff0e5);padding:var(--space-lg) var(--space-md);padding-bottom:var(--space-xxl);overflow:hidden}.hero-content.svelte-r88rzg{display:flex;align-items:center;gap:var(--space-md);max-width:var(--max-width);margin:0 auto;position:relative;z-index:1}.back-button.svelte-r88rzg{display:flex;align-items:center;justify-content:center;width:var(--touch-recommended);height:var(--touch-recommended);background:#ffffffe6;border-radius:var(--radius-md);color:var(--color-text);text-decoration:none;box-shadow:0 2px 8px #0000001a;transition:transform var(--transition-fast),box-shadow var(--transition-fast);flex-shrink:0}.back-button.svelte-r88rzg:hover{transform:scale(1.05);box-shadow:0 4px 12px #00000026}.back-button.svelte-r88rzg:active{transform:scale(.95)}.back-button.svelte-r88rzg svg:where(.svelte-r88rzg){width:28px;height:28px}.hero-text.svelte-r88rzg{flex:1}.hero-title.svelte-r88rzg{display:flex;align-items:center;gap:var(--space-sm);font-size:clamp(1.5rem,4vw,2rem);font-weight:800;color:var(--color-text);margin:0}.hero-emoji.svelte-r88rzg{font-size:1.2em;animation:svelte-r88rzg-shape-rotate 4s ease-in-out infinite}@keyframes svelte-r88rzg-shape-rotate{0%,to{transform:rotate(0) scale(1)}25%{transform:rotate(10deg) scale(1.1)}75%{transform:rotate(-10deg) scale(1.1)}}.hero-subtitle.svelte-r88rzg{font-size:var(--font-size-body);color:var(--color-text);margin:var(--space-xs) 0 0;opacity:.8}.hero-mascot.svelte-r88rzg{display:none}.mascot-emoji.svelte-r88rzg{font-size:3rem;animation:svelte-r88rzg-owl-bob 2.5s ease-in-out infinite}@keyframes svelte-r88rzg-owl-bob{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(-5deg)}}.hero-wave.svelte-r88rzg{position:absolute;bottom:0;left:0;width:100%;overflow:hidden;line-height:0}.hero-wave.svelte-r88rzg svg:where(.svelte-r88rzg){position:relative;display:block;width:calc(100% + 1.3px);height:40px}.hero-wave.svelte-r88rzg path:where(.svelte-r88rzg){fill:var(--color-light-cream)}.shapes-section.svelte-r88rzg{padding:var(--space-lg) var(--space-md);padding-top:var(--space-md);max-width:var(--max-width);margin:0 auto}.section-title.svelte-r88rzg{font-size:var(--font-size-section-title);font-weight:700;color:var(--color-text);text-align:center;margin:0 0 var(--space-lg) 0}.title-emoji.svelte-r88rzg{display:inline-block;animation:svelte-r88rzg-tap-bounce 1.5s ease-in-out infinite}@keyframes svelte-r88rzg-tap-bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.shapes-grid.svelte-r88rzg{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-md)}.shape-card.svelte-r88rzg{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--color-white);border:none;border-radius:var(--radius-xl);padding:var(--space-md);cursor:pointer;box-shadow:0 6px 20px #0000001f;transition:transform var(--transition-bounce),box-shadow var(--transition-normal);animation:svelte-r88rzg-card-appear .5s ease-out backwards;animation-delay:var(--animation-delay);overflow:hidden;min-height:140px}.shape-card.svelte-r88rzg:hover{transform:translateY(-6px) scale(1.03);box-shadow:0 12px 32px #0000002e}.shape-card.svelte-r88rzg:active{transform:scale(.95)}.shape-card.svelte-r88rzg:focus-visible{outline:4px solid var(--shape-color);outline-offset:4px}.shape-preview.svelte-r88rzg{width:80px;height:80px;display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-sm)}.shape-svg.svelte-r88rzg{width:100%;height:100%}.shape-name.svelte-r88rzg{font-size:var(--font-size-body);font-weight:700;color:var(--color-text)}.card-shine.svelte-r88rzg{position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.5) 50%,transparent 100%);pointer-events:none}.shape-card.svelte-r88rzg:hover .card-shine:where(.svelte-r88rzg){animation:svelte-r88rzg-shine .6s ease-out}@keyframes svelte-r88rzg-card-appear{0%{opacity:0;transform:scale(.8) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes svelte-r88rzg-shine{0%{left:-100%}to{left:100%}}.modal-backdrop.svelte-r88rzg{position:fixed;inset:0;background:#00000080;display:flex;align-items:flex-start;justify-content:center;z-index:1000;padding:var(--space-md);padding-top:var(--space-lg);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;overflow-y:auto}.modal-backdrop.visible.svelte-r88rzg{opacity:1;visibility:visible}.modal-content.svelte-r88rzg{background:var(--color-white);border-radius:var(--radius-xl);padding:var(--space-lg);max-width:420px;width:100%;position:relative;transform:scale(.9) translateY(20px);opacity:0;transition:transform .3s ease,opacity .3s ease;box-shadow:0 20px 60px #0000004d;margin-bottom:var(--space-lg)}.modal-content.visible.svelte-r88rzg{transform:scale(1) translateY(0);opacity:1}.modal-close.svelte-r88rzg{position:absolute;top:var(--space-md);right:var(--space-md);width:44px;height:44px;border:none;background:#f5f5f5;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--color-text);transition:background-color .2s ease,transform .2s ease;z-index:10}.modal-close.svelte-r88rzg:hover{background:#e0e0e0;transform:scale(1.1)}.modal-close.svelte-r88rzg svg:where(.svelte-r88rzg){width:24px;height:24px}.modal-shape-name.svelte-r88rzg{font-size:2rem;font-weight:800;text-align:center;margin:0 0 var(--space-md) 0}.modal-shape-display.svelte-r88rzg{display:flex;justify-content:center;margin-bottom:var(--space-md)}.modal-shape-svg.svelte-r88rzg{width:120px;height:120px;animation:svelte-r88rzg-shape-pulse 2s ease-in-out infinite}@keyframes svelte-r88rzg-shape-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.speak-btn.svelte-r88rzg{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);width:100%;padding:var(--space-md);background:var(--modal-color);border:none;border-radius:var(--radius-md);font-size:var(--font-size-body);font-weight:700;color:#fff;cursor:pointer;transition:transform var(--transition-fast),opacity var(--transition-fast);box-shadow:0 4px 12px #00000026;margin-bottom:var(--space-lg)}.speak-btn.svelte-r88rzg:hover{transform:scale(1.02)}.speak-btn.svelte-r88rzg:active{transform:scale(.98)}.examples-section.svelte-r88rzg{margin-bottom:var(--space-lg)}.examples-title.svelte-r88rzg{font-size:var(--font-size-label);font-weight:700;color:var(--color-text);margin-bottom:var(--space-md);text-align:center}.examples-grid.svelte-r88rzg{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-sm)}.example-card.svelte-r88rzg{background:#f8f9fa;border:none;border-radius:var(--radius-md);padding:var(--space-sm);display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;transition:transform var(--transition-bounce),box-shadow var(--transition-normal);transform:scale(0);opacity:0}.example-card.visible.svelte-r88rzg{animation:svelte-r88rzg-example-pop .4s ease-out forwards;animation-delay:var(--example-delay)}@keyframes svelte-r88rzg-example-pop{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}.example-card.svelte-r88rzg:hover{transform:scale(1.05);box-shadow:0 4px 12px #0000001a}.example-card.svelte-r88rzg:active{transform:scale(.95)}.example-emoji.svelte-r88rzg{font-size:2rem}.example-name.svelte-r88rzg{font-size:var(--font-size-small);font-weight:600;color:var(--color-text);text-align:center}.draw-section.svelte-r88rzg{margin-bottom:var(--space-lg);padding-top:var(--space-md);border-top:2px dashed #E0E0E0}.draw-title.svelte-r88rzg{font-size:var(--font-size-label);font-weight:700;color:var(--color-text);margin-bottom:var(--space-md);text-align:center}.draw-canvas-wrapper.svelte-r88rzg{background:#f8f9fa;border-radius:var(--radius-lg);padding:var(--space-md);margin-bottom:var(--space-md);display:flex;justify-content:center}.draw-canvas.svelte-r88rzg{width:160px;height:160px}.draw-path.svelte-r88rzg{transition:stroke-dashoffset .05s linear}.trace-section.svelte-r88rzg{padding-top:var(--space-md);border-top:2px dashed #E0E0E0}.trace-title.svelte-r88rzg{font-size:var(--font-size-label);font-weight:700;color:var(--color-text);margin-bottom:var(--space-md);text-align:center}.trace-canvas-wrapper.svelte-r88rzg{position:relative;background:#f8f9fa;border-radius:var(--radius-lg);margin-bottom:var(--space-md);aspect-ratio:1;max-width:280px;margin-left:auto;margin-right:auto;overflow:hidden}.trace-guide.svelte-r88rzg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80%;height:80%}.trace-canvas.svelte-r88rzg{position:absolute;top:0;left:0;width:100%;height:100%;cursor:crosshair;touch-action:none}.trace-canvas.active.svelte-r88rzg{cursor:crosshair}.trace-success.svelte-r88rzg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);background:#fffffff2;padding:var(--space-lg);border-radius:var(--radius-lg);animation:svelte-r88rzg-success-pop .5s ease-out;box-shadow:0 8px 24px #00000026}@keyframes svelte-r88rzg-success-pop{0%{transform:translate(-50%,-50%) scale(0)}50%{transform:translate(-50%,-50%) scale(1.1)}to{transform:translate(-50%,-50%) scale(1)}}.success-emoji.svelte-r88rzg{font-size:3rem}.success-text.svelte-r88rzg{font-size:var(--font-size-card-title);font-weight:800;color:var(--color-grass-green)}.trace-buttons.svelte-r88rzg{display:flex;justify-content:center}.action-btn.svelte-r88rzg{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-md) var(--space-lg);background:linear-gradient(180deg,#4ecdc4,#3db8b0);border:none;border-radius:var(--radius-md);font-size:var(--font-size-body);font-weight:700;color:#fff;cursor:pointer;transition:transform var(--transition-fast),opacity var(--transition-fast);box-shadow:0 4px #2a9d8f,0 6px 12px #00000026}.action-btn.svelte-r88rzg:hover:not(:disabled){transform:translateY(-2px)}.action-btn.svelte-r88rzg:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px #2a9d8f,0 3px 8px #00000026}.action-btn.svelte-r88rzg:disabled{opacity:.6;cursor:not-allowed}.action-btn.secondary.svelte-r88rzg{background:linear-gradient(180deg,#9b59b6,#8a4ca6);box-shadow:0 4px #7a3d96,0 6px 12px #00000026}.btn-emoji.svelte-r88rzg{font-size:1.2em}@media (min-width: 480px){.shapes-grid.svelte-r88rzg{grid-template-columns:repeat(3,1fr)}.shape-card.svelte-r88rzg{min-height:150px}.shape-preview.svelte-r88rzg{width:90px;height:90px}}@media (min-width: 640px){.hero-banner.svelte-r88rzg{padding:var(--space-xl) var(--space-lg);padding-bottom:var(--space-xxl)}.hero-mascot.svelte-r88rzg{display:block}.hero-wave.svelte-r88rzg svg:where(.svelte-r88rzg){height:60px}.shapes-section.svelte-r88rzg{padding:var(--space-xl) var(--space-lg)}.shapes-grid.svelte-r88rzg{grid-template-columns:repeat(4,1fr);gap:var(--space-lg)}.shape-card.svelte-r88rzg{min-height:160px;padding:var(--space-lg)}.shape-preview.svelte-r88rzg{width:100px;height:100px}.modal-content.svelte-r88rzg{padding:var(--space-xl)}}@media (min-width: 900px){.shapes-grid.svelte-r88rzg{max-width:800px;margin:0 auto}}@media (prefers-reduced-motion: reduce){.hero-emoji.svelte-r88rzg,.mascot-emoji.svelte-r88rzg,.title-emoji.svelte-r88rzg,.shape-card.svelte-r88rzg,.card-shine.svelte-r88rzg,.modal-shape-svg.svelte-r88rzg,.example-card.svelte-r88rzg,.trace-success.svelte-r88rzg{animation:none}.shape-card.svelte-r88rzg:hover{transform:none}.example-card.visible.svelte-r88rzg{transform:scale(1);opacity:1}.modal-shape-svg.svelte-r88rzg{transform:none}}