@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&family=Caveat:wght@700&display=swap";
:root{--primary-hue:220;--primary-sat:90%;--primary:hsl(var(--primary-hue), var(--primary-sat), 56%);--on-primary:#fff;--primary-container:hsl(var(--primary-hue), var(--primary-sat), 94%);--on-primary-container:hsl(var(--primary-hue), var(--primary-sat), 25%);--background:hsl(var(--primary-hue), 30%, 96%);--on-background:hsl(var(--primary-hue), 50%, 12%);--surface:hsla(var(--primary-hue), 30%, 100%, .65);--on-surface:hsl(var(--primary-hue), 50%, 15%);--outline:hsla(var(--primary-hue), 30%, 50%, .15);--glow-color:#2196f359;--transition-speed:.8s;--transition-bezier:cubic-bezier(.25, 1, .5, 1)}body[data-theme=rose]{--primary-hue:340;--primary-sat:92%;--primary:hsl(var(--primary-hue), var(--primary-sat), 58%);--primary-container:hsl(var(--primary-hue), var(--primary-sat), 94%);--on-primary-container:hsl(var(--primary-hue), var(--primary-sat), 25%);--background:hsl(var(--primary-hue), 35%, 96%);--on-background:hsl(var(--primary-hue), 50%, 12%);--surface:hsla(var(--primary-hue), 35%, 100%, .65);--on-surface:hsl(var(--primary-hue), 50%, 15%);--outline:hsla(var(--primary-hue), 35%, 50%, .15);--glow-color:#e91e6359}body[data-theme=teal]{--primary-hue:165;--primary-sat:85%;--primary:hsl(var(--primary-hue), var(--primary-sat), 42%);--primary-container:hsl(var(--primary-hue), var(--primary-sat), 92%);--on-primary-container:hsl(var(--primary-hue), var(--primary-sat), 15%);--background:hsl(var(--primary-hue), 25%, 95%);--on-background:hsl(var(--primary-hue), 50%, 10%);--surface:hsla(var(--primary-hue), 25%, 100%, .65);--on-surface:hsl(var(--primary-hue), 50%, 12%);--outline:hsla(var(--primary-hue), 25%, 50%, .15);--glow-color:#00968859}body[data-theme=amber]{--primary-hue:38;--primary-sat:95%;--primary:hsl(var(--primary-hue), var(--primary-sat), 48%);--primary-container:hsl(var(--primary-hue), var(--primary-sat), 92%);--on-primary-container:hsl(var(--primary-hue), var(--primary-sat), 15%);--background:hsl(var(--primary-hue), 30%, 95%);--on-background:hsl(var(--primary-hue), 60%, 10%);--surface:hsla(var(--primary-hue), 30%, 100%, .65);--on-surface:hsl(var(--primary-hue), 60%, 12%);--outline:hsla(var(--primary-hue), 30%, 50%, .15);--glow-color:#ffc10759}body[data-theme=purple]{--primary-hue:275;--primary-sat:85%;--primary:hsl(var(--primary-hue), var(--primary-sat), 58%);--primary-container:hsl(var(--primary-hue), var(--primary-sat), 94%);--on-primary-container:hsl(var(--primary-hue), var(--primary-sat), 25%);--background:hsl(var(--primary-hue), 30%, 96%);--on-background:hsl(var(--primary-hue), 50%, 12%);--surface:hsla(var(--primary-hue), 30%, 100%, .65);--on-surface:hsl(var(--primary-hue), 50%, 15%);--outline:hsla(var(--primary-hue), 30%, 50%, .15);--glow-color:#9c27b059}body[data-theme=lime]{--primary-hue:85;--primary-sat:85%;--primary:hsl(var(--primary-hue), var(--primary-sat), 40%);--primary-container:hsl(var(--primary-hue), var(--primary-sat), 90%);--on-primary-container:hsl(var(--primary-hue), var(--primary-sat), 20%);--background:hsl(var(--primary-hue), 25%, 95%);--on-background:hsl(var(--primary-hue), 50%, 10%);--surface:hsla(var(--primary-hue), 25%, 100%, .65);--on-surface:hsl(var(--primary-hue), 50%, 12%);--outline:hsla(var(--primary-hue), 25%, 50%, .15);--glow-color:#8bc34a59}.no-transition,.no-transition *{transition:none!important}*{box-sizing:border-box;-webkit-user-select:none;user-select:none;margin:0;padding:0}html,body{background-color:var(--background);width:100%;height:100%;color:var(--on-background);transition:background-color var(--transition-speed) var(--transition-bezier), color var(--transition-speed) var(--transition-bezier);font-family:Outfit,sans-serif;overflow:hidden}.canvas-container{z-index:1;background-color:var(--background);width:100%;height:100%;transition:background-color var(--transition-speed) var(--transition-bezier);position:absolute;top:0;left:0;overflow:hidden}#bubble-canvas{cursor:default;width:100%;height:100%;display:block}.doodle-note{color:var(--on-background);z-index:10;opacity:.85;pointer-events:none;transition:color var(--transition-speed) var(--transition-bezier);flex-direction:column;align-items:flex-start;font-family:Caveat,cursive;font-size:1.6rem;font-weight:700;display:flex;position:absolute;top:2rem;left:2rem;transform:rotate(-3deg)}.doodle-arrow{width:60px;height:60px;stroke:var(--primary);stroke-width:3px;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:stroke var(--transition-speed) var(--transition-bezier);margin-top:.5rem;margin-left:2.5rem}.main-wrapper{z-index:2;pointer-events:none;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative}.content-card{background:var(--surface);border:2.5px solid hsla(var(--primary-hue), 40%, 30%, .22);-webkit-backdrop-filter:blur(24px);text-align:center;pointer-events:auto;width:90%;max-width:500px;transition:background var(--transition-speed) var(--transition-bezier), border-color var(--transition-speed) var(--transition-bezier), box-shadow .3s ease;border-radius:32px;flex-direction:column;align-items:center;padding:3.5rem 3rem;display:flex;position:relative;transform:translateY(0);box-shadow:0 16px 40px #0000000d,0 2px 6px #00000005}.content-card:hover{box-shadow:0 24px 50px #00000014,0 4px 12px #00000008}.badge{background:var(--primary-container);color:var(--on-primary-container);letter-spacing:.5px;transition:background var(--transition-speed) var(--transition-bezier), color var(--transition-speed) var(--transition-bezier);border-radius:100px;margin-bottom:2rem;padding:.6rem 1.4rem;font-size:.875rem;font-weight:600;animation:3s ease-in-out infinite alternate float-badge;display:inline-block;box-shadow:0 2px 4px #00000005}.title{letter-spacing:.5px;color:var(--primary);text-shadow:-2.5px -2.5px 0 var(--on-background), 2.5px -2.5px 0 var(--on-background), -2.5px 2.5px 0 var(--on-background), 2.5px 2.5px 0 var(--on-background), -2.5px 0px 0 var(--on-background), 2.5px 0px 0 var(--on-background), 0px -2.5px 0 var(--on-background), 0px 2.5px 0 var(--on-background);transition:color var(--transition-speed) var(--transition-bezier), text-shadow var(--transition-speed) var(--transition-bezier);margin-bottom:1rem;font-size:3.5rem;font-weight:800}.description{color:var(--on-surface);opacity:.85;letter-spacing:.1px;font-size:1.1rem;font-weight:400;line-height:1.5}@keyframes float-badge{0%{transform:translateY(0)}to{transform:translateY(-6px)}}