:root{--app-bg: #0f172a;--text-main: #f8fafc;--text-sub: #94a3b8;--toast-success: #10b981;--toast-error: #ef4444;--toast-warning: #f59e0b;--toast-info: #3b82f6;--toast-glass-bg: rgba(30, 41, 59, .75);--toast-glass-border: rgba(255, 255, 255, .08)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,-apple-system,sans-serif;background-color:var(--app-bg);color:var(--text-main);min-height:100vh;margin:0;overflow-x:hidden;display:flex;justify-content:center;padding:4rem 1rem}.ambient-glow{position:absolute;width:50vw;height:50vw;border-radius:50%;filter:blur(120px);opacity:.15;z-index:0;pointer-events:none}.orb-1{top:-20vw;right:-20vw;background:#6366f1}.orb-2{bottom:-20vw;left:-20vw;background:#ec4899}.demo-wrapper{position:relative;z-index:10;width:100%;max-width:800px;display:flex;flex-direction:column}.header{text-align:center;margin-bottom:4rem}.title{font-size:3.5rem;font-weight:700;background:linear-gradient(135deg,#ffffff 0%,#cbd5e1 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:.5rem;letter-spacing:-.02em}.subtitle{font-size:1.125rem;color:var(--text-sub);font-weight:400}.trigger-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;background:rgba(255,255,255,.02);padding:3rem;border-radius:24px;border:1px solid rgba(255,255,255,.05);box-shadow:0 20px 40px #00000080}.trigger-section{display:flex;flex-direction:column;gap:1rem}.trigger-section h3{font-size:1.1rem;color:#fff;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:.75rem;margin-bottom:.5rem}.pos-select{width:100%;padding:1rem;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.1);color:#fff;border-radius:12px;font-size:.95rem;margin-bottom:1.5rem;outline:none;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.pos-select:focus{border-color:var(--toast-info)}.btn{padding:1rem 1.5rem;border-radius:12px;font-weight:600;font-size:.95rem;cursor:pointer;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);color:#fff;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:.5rem}.btn:hover{transform:translateY(-2px);box-shadow:0 10px 20px #0003}.btn:active{transform:translateY(0)}.btn-success{background:rgba(16,185,129,.1);border-color:#10b9814d;color:var(--toast-success)}.btn-success:hover{background:rgba(16,185,129,.2)}.btn-error{background:rgba(239,68,68,.1);border-color:#ef44444d;color:var(--toast-error)}.btn-error:hover{background:rgba(239,68,68,.2)}.btn-warning{background:rgba(245,158,11,.1);border-color:#f59e0b4d;color:var(--toast-warning)}.btn-warning:hover{background:rgba(245,158,11,.2)}.btn-info{background:rgba(59,130,246,.1);border-color:#3b82f64d;color:var(--toast-info)}.btn-info:hover{background:rgba(59,130,246,.2)}.toast-container{position:fixed;z-index:9999;display:flex;flex-direction:column;gap:1rem;pointer-events:none}.toast-container>*{pointer-events:auto}.toast-top-right{top:1.5rem;right:1.5rem;align-items:flex-end}.toast-bottom-right{bottom:1.5rem;right:1.5rem;align-items:flex-end}.toast-top-left{top:1.5rem;left:1.5rem;align-items:flex-start}.toast-bottom-left{bottom:1.5rem;left:1.5rem;align-items:flex-start}.toast-top-center{top:1.5rem;left:50%;transform:translate(-50%);align-items:center}.toast-bottom-center{bottom:1.5rem;left:50%;transform:translate(-50%);align-items:center}.toast-notification{position:relative;width:100%;width:360px;background:var(--toast-glass-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--toast-glass-border);border-radius:12px;padding:1rem 1.25rem;display:flex;align-items:flex-start;gap:1rem;box-shadow:0 10px 40px #00000080,inset 0 1px #ffffff0d;overflow:hidden;animation:toastSpawn .4s cubic-bezier(.16,1,.3,1) forwards;will-change:transform,opacity}.toast-notification.toast-closing{animation:toastDespawn .3s cubic-bezier(.5,0,.1,1) forwards}.toast-icon{flex-shrink:0;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--badge-color);background:var(--badge-bg)}.toast-content{flex-grow:1;display:flex;flex-direction:column;gap:.25rem;padding-right:.5rem}.toast-title{color:#fff;font-weight:600;font-size:.95rem}.toast-message{color:var(--text-sub);font-size:.85rem;line-height:1.4}.toast-close{flex-shrink:0;background:none;border:none;color:var(--text-sub);cursor:pointer;padding:.25rem;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .2s;opacity:.5}.toast-close:hover{opacity:1;background:rgba(255,255,255,.1);color:#fff}.toast-progress{position:absolute;bottom:0;left:0;height:3px;background:var(--badge-color);box-shadow:0 0 10px var(--badge-color);opacity:.7;width:100%}@keyframes progressShrink{0%{width:100%}to{width:0%}}@keyframes toastSpawn{0%{opacity:0;transform:translateY(15px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes toastDespawn{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95);margin-top:-80px}}.toast-notification.type-success{border-color:#10b98133;--badge-color: var(--toast-success);--badge-bg: rgba(16, 185, 129, .15)}.toast-notification.type-error{border-color:#ef444433;--badge-color: var(--toast-error);--badge-bg: rgba(239, 68, 68, .15)}.toast-notification.type-warning{border-color:#f59e0b33;--badge-color: var(--toast-warning);--badge-bg: rgba(245, 158, 11, .15)}.toast-notification.type-info{border-color:#3b82f633;--badge-color: var(--toast-info);--badge-bg: rgba(59, 130, 246, .15)}@media (max-width: 600px){.toast-container{width:100%;padding:0 1rem;left:0!important;right:0!important;align-items:center!important}.toast-notification{width:100%}.toast-bottom-left,.toast-bottom-right{bottom:1rem}.toast-top-left,.toast-top-right{top:1rem}.trigger-grid{padding:1.5rem}}