:root{--ivory: #faf9f6;--charcoal: #2d2d2d;--sage: #9caf88;--terracotta: #d47b6a;--slate-blue: #7b8fa3;--warm-gray: #c9bfb1;--deep-teal: #4a7c7e;--soft-lavender: #b5a6c9;--muted-gold: #d4a574;--shadow-soft: 0 4px 24px rgba(0, 0, 0, .06);--shadow-medium: 0 8px 40px rgba(0, 0, 0, .1)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:DM Sans,sans-serif;background:linear-gradient(135deg,var(--ivory) 0%,#f5f3ed 100%);color:var(--charcoal);min-height:100vh;overflow-x:hidden}.app{max-width:1400px;margin:0 auto;padding:3rem 2rem}header{text-align:center;margin-bottom:2rem;animation:fadeInDown .8s ease-out}h1{font-family:Crimson Pro,serif;font-size:3.5rem;font-weight:300;color:var(--charcoal);letter-spacing:-.02em;margin-bottom:.5rem}.tagline{font-size:1.1rem;color:var(--warm-gray);font-weight:400}.description-panel{background:#ffffffb3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(157,175,136,.2);border-radius:16px;padding:2rem 2.5rem;margin:2rem auto 3rem;max-width:900px;box-shadow:var(--shadow-soft);animation:fadeIn .8s ease-out .2s backwards}.description-panel p{font-family:Crimson Pro,serif;font-size:1.25rem;line-height:1.7;color:var(--charcoal);font-weight:400}.slider-group{display:flex;gap:2rem;justify-content:center;flex-wrap:wrap;margin:3rem auto;max-width:1000px;animation:fadeIn .8s ease-out .4s backwards}.slider-item{flex:1;min-width:280px}.slider-item label{display:block;font-size:.9rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--warm-gray);margin-bottom:1rem;text-align:center}.tri-state{display:flex;gap:.5rem;background:#ffffff80;padding:.5rem;border-radius:12px;border:1px solid rgba(157,175,136,.2)}.tri-state button{flex:1;padding:.9rem 1.2rem;border:none;background:transparent;border-radius:8px;font-family:DM Sans,sans-serif;font-size:.95rem;font-weight:500;color:var(--charcoal);cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative}.tri-state button:hover{transform:translateY(-2px)}.tri-state button.active{background:var(--sage);color:#fff;box-shadow:0 4px 12px #9caf884d}.tri-state button:before{z-index:0}.tri-state button span{position:relative;z-index:1}.bubble-area{position:relative;height:600px;margin:4rem auto;animation:fadeIn .8s ease-out .6s backwards}.domain-bubble{position:absolute;width:180px;height:180px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-align:center;padding:1.5rem;cursor:pointer;transform:translate(-50%,-50%);transition:all .5s cubic-bezier(.4,0,.2,1);background:#ffffffe6;border:2px solid rgba(157,175,136,.3);box-shadow:var(--shadow-soft)}.domain-bubble:nth-child(1){background:linear-gradient(135deg,#d47b6a26,#d47b6a40);border-color:var(--terracotta)}.domain-bubble:nth-child(2){background:linear-gradient(135deg,#7b8fa326,#7b8fa340);border-color:var(--slate-blue)}.domain-bubble:nth-child(3){background:linear-gradient(135deg,#4a7c7e26,#4a7c7e40);border-color:var(--deep-teal)}.domain-bubble:nth-child(4){background:linear-gradient(135deg,#b5a6c926,#b5a6c940);border-color:var(--soft-lavender)}.domain-bubble:nth-child(5){background:linear-gradient(135deg,#d4a57426,#d4a57440);border-color:var(--muted-gold)}.domain-bubble:nth-child(6){background:linear-gradient(135deg,#9caf8826,#9caf8840);border-color:var(--sage)}.domain-bubble:nth-child(7){background:linear-gradient(135deg,#c9bfb126,#c9bfb140);border-color:var(--warm-gray)}.domain-bubble.github{background:linear-gradient(135deg,#2d2d2d0d,#2d2d2d26);border:2px dashed var(--warm-gray);width:150px;height:150px}.github-content{display:flex;flex-direction:column;align-items:center;gap:.5rem;color:var(--charcoal)}.github-content svg{opacity:.6}.github-content span{font-size:.85rem;font-weight:500}.domain-bubble span{font-size:.95rem;font-weight:600;line-height:1.3;color:var(--charcoal)}.domain-bubble:hover{transform:translate(-50%,-50%) scale(1.05);box-shadow:var(--shadow-medium)}.domain-bubble.active{transform:translate(-50%,-50%) scale(1.15);z-index:10;box-shadow:0 12px 48px #00000026;border-width:3px}.bubble-area:has(.domain-bubble.active) .domain-bubble:not(.active){opacity:.3;transform:translate(-50%,-50%) scale(.9)}.examples-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}.example-bubble{position:absolute;width:200px;background:#fff;border-radius:12px;padding:1.2rem;box-shadow:var(--shadow-medium);border:1px solid rgba(157,175,136,.2);transform:translate(-50%,-50%);animation:bubbleAppear .5s cubic-bezier(.34,1.56,.64,1) backwards;pointer-events:auto}.example-bubble:nth-child(1){animation-delay:.1s}.example-bubble:nth-child(2){animation-delay:.15s}.example-bubble:nth-child(3){animation-delay:.2s}.example-bubble:nth-child(4){animation-delay:.25s}.example-bubble:nth-child(5){animation-delay:.3s}.example-bubble:nth-child(6){animation-delay:.35s}.example-bubble p{font-size:.85rem;line-height:1.5;color:var(--charcoal);margin:0}footer{text-align:center;margin-top:4rem;padding-top:2rem;border-top:1px solid rgba(157,175,136,.2);animation:fadeIn .8s ease-out .8s backwards}footer p{font-size:.9rem;line-height:1.6;color:var(--warm-gray)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes bubbleAppear{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@media (max-width: 768px){h1{font-size:2.5rem}.description-panel{padding:1.5rem}.description-panel p{font-size:1.1rem}.slider-group{flex-direction:column;gap:1.5rem}.slider-item{min-width:100%}.bubble-area{height:500px}.domain-bubble{width:140px;height:140px;font-size:.85rem;padding:1rem}.example-bubble{width:160px;padding:1rem}.example-bubble p{font-size:.8rem}}