:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light;color:#333;background-color:#fff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;min-width:320px;min-height:100vh;font-family:system-ui,Avenir,Helvetica,Arial,sans-serif}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}@keyframes tooltipFadeIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.code-tooltip-container{position:absolute;top:12px;right:16px;z-index:1000;display:flex;flex-direction:row}.code-tooltip-container:hover .code-tooltip-trigger{transform:scale(1.15) rotate(5deg);background:linear-gradient(135deg,#3b82f633,#9333ea33);border-color:#3b82f680;box-shadow:0 4px 16px #3b82f64d,0 0 20px #9333ea33}.code-tooltip-trigger{cursor:pointer;font-size:18px;padding:8px 10px;border-radius:8px;background:linear-gradient(135deg,#3b82f61a,#9333ea1a);border:1px solid rgba(59,130,246,.3);transition:all .3s cubic-bezier(.4,0,.2,1);-webkit-user-select:none;user-select:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 2px 8px #3b82f61a;min-width:40px;text-align:center;position:relative;z-index:999}.code-tooltip-trigger:hover{transform:scale(1.15) rotate(5deg);background:linear-gradient(135deg,#3b82f633,#9333ea33);border-color:#3b82f680;box-shadow:0 4px 16px #3b82f64d,0 0 20px #9333ea33}.code-tooltip-trigger:active{transform:scale(1.05)}.code-tooltip-content{position:absolute;top:-20px;right:75px;margin-top:16px;min-width:450px;max-width:650px;background:linear-gradient(135deg,#1a1a1a,#2d2d2d);color:#e5e5e5;border-radius:12px;font-size:13px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;line-height:1.5;box-shadow:0 20px 40px #0006,0 8px 24px #0000004d,inset 0 1px #ffffff1a;border:1px solid rgba(255,255,255,.2);z-index:10002;white-space:pre-wrap;overflow:hidden;max-height:450px;animation:tooltipFadeIn .3s cubic-bezier(.4,0,.2,1);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);pointer-events:auto}.code-tooltip-header{display:flex;justify-content:space-between;align-items:center;padding:12px 20px 8px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:12px}.code-tooltip-title{font-size:12px;font-weight:600;color:#a1a1aa;text-transform:uppercase;letter-spacing:.5px}.code-tooltip-copy-btn{background:#3b82f633;border:1px solid rgba(59,130,246,.3);color:#60a5fa;padding:4px 8px;border-radius:6px;font-size:11px;cursor:pointer;transition:all .2s ease;font-family:inherit}.code-tooltip-copy-btn:hover{background:#3b82f64d;border-color:#3b82f680;transform:scale(1.05)}.code-tooltip-content pre{padding:0 20px 20px;overflow:auto;max-height:350px;margin:0}.code-tooltip-arrow{position:absolute;top:-9px;right:20px;width:16px;height:16px;background:linear-gradient(135deg,#1a1a1a,#2d2d2d);border:1px solid rgba(255,255,255,.2);border-bottom:none;border-right:none;transform:rotate(45deg);z-index:9998}@keyframes tooltipFadeIn{0%{opacity:0;transform:translateY(-10px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.demo-section{position:relative}.code-tooltip-content .token.comment,.code-tooltip-content .token.prolog,.code-tooltip-content .token.doctype,.code-tooltip-content .token.cdata{color:#6a737d;font-style:italic}.code-tooltip-content .token.punctuation{color:#d1d5db}.code-tooltip-content .token.namespace{opacity:.7}.code-tooltip-content .token.property,.code-tooltip-content .token.tag,.code-tooltip-content .token.boolean,.code-tooltip-content .token.number,.code-tooltip-content .token.constant,.code-tooltip-content .token.symbol,.code-tooltip-content .token.deleted{color:#f97316}.code-tooltip-content .token.selector,.code-tooltip-content .token.attr-name,.code-tooltip-content .token.string,.code-tooltip-content .token.char,.code-tooltip-content .token.builtin,.code-tooltip-content .token.inserted{color:#10b981}.code-tooltip-content .token.operator,.code-tooltip-content .token.entity,.code-tooltip-content .token.url,.code-tooltip-content .language-css .token.string,.code-tooltip-content .style .token.string{color:#6366f1}.code-tooltip-content .token.atrule,.code-tooltip-content .token.attr-value,.code-tooltip-content .token.keyword{color:#8b5cf6}.code-tooltip-content .token.function,.code-tooltip-content .token.class-name{color:#06b6d4}.code-tooltip-content .token.regex,.code-tooltip-content .token.important,.code-tooltip-content .token.variable{color:#ec4899}.code-tooltip-content .token.important,.code-tooltip-content .token.bold{font-weight:700}.code-tooltip-content .token.italic{font-style:italic}.code-tooltip-content .token.entity{cursor:help}.code-tooltip-content code{color:#e5e5e5;background:none;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:13px;line-height:1.6;padding:0}.code-tooltip-content pre[class*=language-]{margin:0;padding:0;overflow:auto;background:none;border:none}.code-tooltip-content code[class*=language-]{background:none;color:#e5e5e5;text-shadow:none;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;-moz-tab-size:2;tab-size:2;-webkit-hyphens:none;hyphens:none}.app{min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2);color:#333}.app-header{text-align:center;padding:2rem;background:#fffffff2;box-shadow:0 2px 10px #0000001a}.app-header h1{margin:0 0 .5rem;color:#4a5568;font-size:2.5rem;font-weight:700}.app-header p{margin:0;color:#718096;font-size:1.1rem}.app-content{display:flex;min-height:calc(100vh - 120px)}.sidebar{width:350px;background:#fffffff2;padding:2rem;box-shadow:2px 0 10px #0000001a}.sidebar h2{margin:0 0 1.5rem;color:#4a5568;font-size:1.5rem;font-weight:600}.example-list{list-style:none;padding:0;margin:0}.example-list li{margin-bottom:1rem}.example-button{width:100%;text-align:left;padding:1.5rem;border:2px solid #e2e8f0;border-radius:12px;background:#fff;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 4px #0000001a}.example-button:hover{border-color:#667eea;transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.example-button.active{border-color:#667eea;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.example-title{font-weight:600;font-size:1.1rem;margin-bottom:.5rem}.example-description{font-size:.9rem;opacity:.8;line-height:1.4}.main-content{flex:1;padding:2rem}.example-header{background:#fffffff2;padding:2rem;border-radius:12px;margin-bottom:2rem;box-shadow:0 4px 12px #0000001a}.example-header h2{margin:0 0 .5rem;color:#4a5568;font-size:1.8rem;font-weight:600}.example-header p{margin:0;color:#718096;font-size:1rem}.example-container{background:#fffffff2;padding:2rem;border-radius:12px;box-shadow:0 4px 12px #0000001a;min-height:400px}.example-demo{display:flex;flex-direction:column;gap:2rem}.demo-section{padding:1.5rem;border:2px solid #e2e8f0;border-radius:8px;background:#f7fafc}.demo-section h3{margin:0 0 1rem;color:#4a5568;font-size:1.2rem;font-weight:600}.demo-controls{display:flex;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}.demo-button{padding:.75rem 1.5rem;border:none;border-radius:6px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-weight:500;cursor:pointer;transition:all .2s ease}.demo-button:hover{transform:translateY(-1px);box-shadow:0 2px 8px #667eea4d}.demo-button:active{transform:translateY(0)}.demo-button.secondary{background:#e2e8f0;color:#4a5568}.demo-button.secondary:hover{background:#cbd5e0;box-shadow:0 2px 8px #0000001a}.demo-state{background:#fff;padding:1rem;border-radius:6px;border:1px solid #e2e8f0;font-family:Courier New,monospace;font-size:.9rem;color:#4a5568;white-space:pre-wrap}.demo-info{background:#ebf8ff;border:1px solid #bee3f8;border-radius:6px;padding:1rem;color:#2b6cb0;font-size:.9rem;line-height:1.5}.locale-buttons{display:flex;gap:.5rem}.locale-button{padding:.5rem 1rem;border:2px solid #e2e8f0;border-radius:6px;background:#fff;color:#4a5568;font-weight:500;cursor:pointer;transition:all .2s ease}.locale-button:hover{border-color:#cbd5e0;background:#f7fafc}.locale-button.active{border-color:#667eea;background:#667eea;color:#fff}.status-display{background:#f0fff4;border:1px solid #9ae6b4;border-radius:6px;padding:1rem;color:#22543d;font-weight:500}.error-display{background:#fed7d7;border:1px solid #feb2b2;border-radius:6px;padding:1rem;color:#c53030;font-weight:500}@media (max-width: 768px){.app-content{flex-direction:column}.sidebar{width:100%;padding:1rem}.main-content{padding:1rem}.demo-controls{flex-direction:column}}