:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400}body{margin:0}.anchor-feature .anchor{anchor-name:--myAnchor;width:fit-content;background:#333;color:#f5f5f5;font-size:3rem;margin:5vh auto}.anchor-feature .infobox{position:fixed;position-anchor:--myAnchor;inset-block-start:anchor(end);inset-inline-start:anchor(end);justify-self:anchor-center;background:#ffc107}.in-view-animation-feature img{width:100%;max-width:300px;border-radius:1rem}.in-view-animation-feature li{list-style:none}.in-view-animation-feature li:nth-child(2n){margin-top:12rem}.in-view-animation-feature li:nth-child(odd):not(:first-child){margin-top:0rem}.in-view-animation-feature ul{padding:0;display:grid;grid-template-columns:auto auto;gap:0 2rem;justify-content:center}@keyframes appear{0%{opacity:0;transform:translate(-100%)}50%{opacity:1;transform:translate(0)}to{opacity:1;transform:translate(0)}}li img{animation:appear linear;animation-timeline:view();animation-range:entry exit}:root{--light-background: #f5f5f5;--light-color: #333;--dark-background: #333;--dark-color: #f5f5f5}.light-dark-feature section{color-scheme:light dark;background:light-dark(var(--light-background),var(--dark-background));color:light-dark(var(--light-color),var(--dark-color));padding:1rem;margin:1rem 0}.light-dark-feature .dark{color-scheme:dark}@property --my-color{syntax: "<color>"; inherits: false; initial-value: #c0ffee;}.register-property-feature .registered{background-image:linear-gradient(to right,#fff,var(--my-color));transition:--my-color .7s ease-in-out}.register-property-feature .registered:hover,.register-property-feature .registered:focus{--my-color: #b4d455}.register-property-feature .unregistered{--unregistered: #c0ffee;background-image:linear-gradient(to right,#fff,var(--unregistered));transition:--unregistered .7s ease-in-out}.register-property-feature .unregistered:hover,.register-property-feature .unregistered:focus{--unregistered: #b4d455}.register-property-feature button{font-size:3vw;display:block;margin:0 auto;padding:1rem 2rem;margin-bottom:2rem}.scroll-animation-feature .scroll-element{width:300px;height:300px;margin-top:300px;position:absolute;bottom:0;animation-name:rotateAnimation;animation-duration:1ms;animation-direction:alternate;animation-timeline:scroll(block nearest)}@keyframes rotateAnimation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.scroll-animation-feature .scroll-wrapper{height:100vh;overflow-y:scroll;position:relative;width:100%}.scroll-animation-feature .scroll-stretcher{height:150vh}pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
  Theme: GitHub Dark
  Description: Dark theme as seen on github.com
  Author: github.com
  Maintainer: @Hirse
  Updated: 2021-05-15

  Outdated base version: https://github.com/primer/github-syntax-dark
  Current colors taken from GitHub's CSS
*/.hljs{color:#c9d1d9;background:#0d1117}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#ff7b72}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#d2a8ff}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-variable,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id{color:#79c0ff}.hljs-regexp,.hljs-string,.hljs-meta .hljs-string{color:#a5d6ff}.hljs-built_in,.hljs-symbol{color:#ffa657}.hljs-comment,.hljs-code,.hljs-formula{color:#8b949e}.hljs-name,.hljs-quote,.hljs-selector-tag,.hljs-selector-pseudo{color:#7ee787}.hljs-subst{color:#c9d1d9}.hljs-section{color:#1f6feb;font-weight:700}.hljs-bullet{color:#f2cc60}.hljs-emphasis{color:#c9d1d9;font-style:italic}.hljs-strong{color:#c9d1d9;font-weight:700}.hljs-addition{color:#aff5b4;background-color:#033a16}.hljs-deletion{color:#ffdcd7;background-color:#67060c}.showcase-container{max-width:1200px;margin:0 auto;padding:2rem;font-family:system-ui,-apple-system,sans-serif;line-height:1.6;min-height:100vh}.showcase-header{text-align:center;margin-bottom:3rem;padding:2rem;color:#fff;border-radius:1rem;box-shadow:0 10px 30px #0000001a}.showcase-header h1{font-size:2.5rem;margin-bottom:.5rem;font-weight:700}.subtitle{font-size:1.2rem;opacity:.95;margin:0}.demo-section,.info-section,.benefits-section,.browser-support{background:#fff;border-radius:.75rem;padding:2rem;margin-bottom:2rem;box-shadow:0 4px 6px #00000012;border:1px solid #e5e7eb}.demo-section h2,.info-section h2,.benefits-section h2,.browser-support h2{font-size:1.75rem;margin-top:0;margin-bottom:1rem;color:#1f2937}.demo-description{color:#6b7280;font-style:italic;margin-bottom:1.5rem}.code-details{margin-top:1.5rem;border:1px solid #e5e7eb;border-radius:.5rem;overflow:hidden}.code-details summary{padding:1rem 1.5rem;background:#f3f4f6;cursor:pointer;font-weight:600;color:#374151;list-style:none;-webkit-user-select:none;user-select:none;transition:background .2s}.code-details summary::-webkit-details-marker{display:none}.code-details summary:before{content:"▶ ";display:inline-block;transition:transform .2s;margin-right:.5rem}.code-details[open] summary:before{transform:rotate(90deg)}.code-details summary:hover{background:#e5e7eb}.code-block{display:block;padding:1.5rem;margin:0;overflow-x:auto;font-family:Courier New,Courier,monospace;font-size:.9rem;line-height:1.6;border-radius:.25rem}.code-details pre{margin:0;border-top:1px solid #374151}.code-details pre+pre{border-top:1px solid #4b5563}.demo-controls{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;margin-bottom:1.5rem}.btn{padding:.75rem 1.5rem;font-size:1rem;font-weight:600;border:none;border-radius:.5rem;cursor:pointer;transition:all .2s;box-shadow:0 2px 4px #0000001a}.btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 8px #00000026}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:#3b82f6;color:#fff}.btn-primary:hover:not(:disabled){background:#2563eb}.btn-secondary{background:#6b7280;color:#fff}.btn-secondary:hover:not(:disabled){background:#4b5563}.btn-success{background:#10b981;color:#fff}.btn-success:hover:not(:disabled){background:#059669}.btn-warning{background:#f59e0b;color:#fff}.btn-warning:hover:not(:disabled){background:#d97706}.btn-sm{padding:.5rem 1rem;font-size:.875rem}.benefits-section ul{list-style:none;padding:0}.benefits-section li{padding:1rem;margin-bottom:.75rem;background:#f9fafb;border-radius:.5rem;border-left:4px solid #10b981;font-size:1.05rem}.browser-support ul{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}.browser-support li{padding:1rem;background:#f9fafb;border-radius:.5rem;text-align:center;font-size:1.1rem;font-weight:500}.not-supported{text-align:center;padding:3rem;background:#fef2f2;border:2px solid #fecaca;border-radius:1rem}.not-supported h2{color:#dc2626;margin-bottom:1rem}.not-supported p{color:#991b1b;font-size:1.1rem;line-height:1.8}@media (max-width: 768px){.showcase-container{padding:1rem}.showcase-header h1{font-size:2rem}.subtitle{font-size:1rem}.demo-section,.info-section,.benefits-section,.browser-support{padding:1.5rem}.demo-controls{flex-direction:column;align-items:stretch}.btn{width:100%}.browser-support ul{grid-template-columns:1fr}}.custom-highlight-container{background:linear-gradient(to bottom,#ede9fe,#fff)}.custom-highlight-container .showcase-header{background:linear-gradient(135deg,#8b5cf6,#6d28d9)}.traditional-example{padding:1.5rem;background:#fef2f2;border-radius:.5rem;border-left:4px solid #ef4444}.traditional-text,.traditional-text-marked{padding:1rem;background:#fff;border-radius:.5rem;margin-bottom:1rem;font-size:1.05rem;line-height:1.8}.traditional-text-marked mark{background-color:#fef08a;padding:.2rem 0}.example-note{margin-top:1rem;padding:1rem;background:#fff7ed;border-left:3px solid #f59e0b;border-radius:.25rem;font-size:.95rem;line-height:1.6}.example-note code{background:#fef3c7;padding:.2rem .4rem;border-radius:.25rem;font-family:Courier New,monospace;font-size:.9em}.demo-text{padding:1.5rem;background:#f9fafb;border-radius:.5rem;border-left:4px solid #667eea;font-size:1.1rem;line-height:1.8}.search-box{position:relative;margin-bottom:1.5rem}.search-input{width:100%;padding:1rem 3rem 1rem 1rem;font-size:1rem;border:2px solid #d1d5db;border-radius:.5rem;outline:none;transition:all .2s;box-sizing:border-box}.search-input:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.clear-button{position:absolute;right:1rem;top:50%;transform:translateY(-50%);background:#ef4444;color:#fff;border:none;border-radius:50%;width:2rem;height:2rem;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;transition:all .2s}.clear-button:hover{background:#dc2626;transform:translateY(-50%) scale(1.1)}.search-text{padding:1.5rem;background:#f9fafb;border-radius:.5rem;font-size:1.05rem}.search-text p{margin-bottom:1rem}.search-text p:last-child{margin-bottom:0}.code-sample{background:#1f2937;color:#e5e7eb;padding:1.5rem;border-radius:.5rem;overflow-x:auto;font-family:Courier New,Courier,monospace;font-size:.95rem;line-height:1.6;margin:0}.info-section ol{padding-left:1.5rem}.info-section li{margin-bottom:1rem;font-size:1.05rem}.code-example{margin-top:2rem;padding:1.5rem;background:#f9fafb;border-radius:.5rem}.code-example h3{color:#667eea;margin-top:1.5rem;margin-bottom:.75rem;font-size:1.2rem}.code-example h3:first-child{margin-top:0}.code-example pre{background:#1f2937;color:#e5e7eb;padding:1rem;border-radius:.5rem;overflow-x:auto;font-size:.9rem;margin:0}::highlight(static-highlight){background-color:#fef08a;color:#1f2937;text-decoration:underline;text-decoration-color:#eab308;text-decoration-thickness:2px}::highlight(search-highlight){background-color:#fda4af;color:#1f2937;font-weight:600}::highlight(keyword-highlight){background-color:#93c5fd;color:#1e3a8a;font-weight:600}::highlight(string-highlight){background-color:#86efac;color:#14532d;font-style:italic}.fetch-later-container{background:linear-gradient(to bottom,#fed7aa,#fff)}.fetch-later-container .showcase-header{background:linear-gradient(135deg,#f97316,#ea580c)}.summarizer-container{background:linear-gradient(to bottom,#d1fae5,#fff)}.summarizer-container .showcase-header{background:linear-gradient(135deg,#10b981,#059669)}.summary-output{margin-top:1rem;padding:1rem;background:#ffffff1a;border-radius:8px;border-left:4px solid #10b981}.summary-output h3{margin-top:0;margin-bottom:.75rem;font-size:1.1rem}.summary-output p{margin:0;line-height:1.6}.summary-output.streaming{border-left-color:#3b82f6}.summary-output .cursor{display:inline-block;animation:blink 1s infinite;color:#10b981;font-weight:700}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:0}}.use-case-card{background:#ffffff1a;padding:1rem;border-radius:8px;border-left:3px solid #10b981}.hint{margin-top:1rem;padding:.75rem;background:#d1fae5;border:1px solid #10b981;border-radius:6px;color:#065f46}.translator-container{background:linear-gradient(to bottom,#cffafe,#fff)}.translator-container .showcase-header{background:linear-gradient(135deg,#06b6d4,#0891b2)}.text-input{width:100%;padding:.75rem;border:1px solid rgba(255,255,255,.2);border-radius:8px;background:#ffffff1a;color:#000;font-size:1rem;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;resize:vertical;min-height:120px}.text-input:focus{outline:none;border-color:#ffffff80;background:#ffffff1a;color:#000}.detection-result{display:flex;gap:1rem;align-items:center;padding:.5rem .75rem;background:#06b6d41a;border-radius:6px;border:1px solid rgba(6,182,212,.3)}.detection-language,.detection-confidence{font-size:.9rem;color:#0e7490}.detecting-indicator{animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.3}}.sample-text-selector{margin-bottom:1rem}.sample-text-selector label{display:block;font-weight:500;font-size:1rem;margin-bottom:.5rem}.sample-buttons{display:flex;gap:.5rem;flex-wrap:wrap}.sample-buttons .btn{transition:all .2s ease}.sample-buttons .btn.active{background:#06b6d4;color:#fff;border-color:#0891b2;transform:scale(1.05)}.language-selector{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}.language-selector label{font-weight:500;font-size:1rem}.language-select{flex:1;max-width:300px;padding:.5rem .75rem;border:1px solid rgba(6,182,212,.3);border-radius:6px;background:#ffffffe6;color:#164e63;font-size:1rem;cursor:pointer;transition:all .2s ease}.language-select:hover{border-color:#06b6d480}.language-select:focus{outline:none;border-color:#06b6d4;box-shadow:0 0 0 3px #06b6d41a}.translation-output{margin-top:1rem;padding:1rem;background:#ffffff1a;border-radius:8px;border-left:4px solid #06b6d4}.translation-output h3{margin-top:0;margin-bottom:.75rem;font-size:1.1rem}.translation-output p{margin:0;line-height:1.6;font-size:1.05rem}.use-cases-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;margin-top:1rem}.use-case-card{background:#ffffff1a;padding:1rem;border-radius:8px;border-left:3px solid #06b6d4}.use-case-card h3{margin-top:0;margin-bottom:.5rem;font-size:1.1rem;color:#fff}.use-case-card p{margin:0;color:#ffffffe6;font-size:.95rem;line-height:1.5}.hint{margin-top:1rem;padding:.75rem;background:#cffafe;border:1px solid #06b6d4;border-radius:6px;color:#164e63}.web-locks-container{background:linear-gradient(to bottom,#f0f9ff,#fff)}.web-locks-container .showcase-header{background:linear-gradient(135deg,#3b82f6,#1e40af)}.use-cases-section,.log-section{background:#fff;border-radius:.75rem;padding:2rem;margin-bottom:2rem;box-shadow:0 4px 6px #00000012;border:1px solid #e5e7eb}.use-cases-section h2,.log-section h3{font-size:1.75rem;margin-top:0;margin-bottom:1rem;color:#1f2937}.key-concepts{margin-top:1.5rem;padding:1.5rem;background:#f0f9ff;border-radius:.5rem;border-left:4px solid #3b82f6}.key-concepts h3{margin-top:0;color:#1e40af}.key-concepts ul{margin:0;padding-left:1.5rem}.key-concepts li{margin-bottom:.75rem}.status-display{padding:.75rem 1.5rem;background:#f9fafb;border-radius:.5rem;border:2px solid #e5e7eb;font-size:1rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem}.status-display strong{color:#3b82f6}.key-concepts ol{margin:.5rem 0 0;padding-left:1.5rem}.key-concepts ol li{margin-bottom:1rem;line-height:1.6}.key-concepts p{margin-bottom:0;line-height:1.6}.counter-demo{padding:1.5rem;background:#f9fafb;border-radius:.5rem}.counter-display{font-size:2rem;text-align:center;padding:2rem;background:#fff;border-radius:.5rem;margin-bottom:1.5rem;border:3px solid #3b82f6}.counter-display strong{color:#3b82f6;font-size:3rem}.hint{margin-top:1rem;padding:1rem;background:#fff7ed;border-left:3px solid #f59e0b;border-radius:.25rem;font-size:.95rem}.lock-info{margin-top:1.5rem;padding:1rem;background:#f9fafb;border-radius:.5rem}.lock-info h4{margin-top:0;color:#3b82f6}.lock-state{background:#1f2937;color:#e5e7eb;padding:1rem;border-radius:.5rem;overflow-x:auto;font-family:Courier New,monospace;font-size:.9rem;margin:0}.log-display{background:#1f2937;color:#e5e7eb;padding:1rem;border-radius:.5rem;min-height:200px;max-height:400px;overflow-y:auto;font-family:Courier New,monospace;font-size:.9rem;margin-bottom:1rem}.log-entry{padding:.25rem 0;border-bottom:1px solid #374151}.log-empty{color:#6b7280;text-align:center;padding:2rem}.use-cases-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin-top:1.5rem}.use-case-card{padding:1.5rem;background:#f0f9ff;border-radius:.5rem;border-left:4px solid #3b82f6}.use-case-card h3{margin-top:0;color:#1e40af;font-size:1.2rem}.use-case-card p{margin:0;color:#374151}.locks-status{display:flex;flex-direction:column;gap:.75rem;padding:1rem;background:#f9fafb;border-radius:.5rem}.lock-item{display:grid;grid-template-columns:auto 1fr auto auto auto;gap:1rem;padding:1rem;border-radius:.5rem;align-items:center;font-size:.95rem;transition:all .3s ease;border:2px solid transparent}.lock-id{font-weight:700;font-family:Courier New,monospace}.lock-resource{color:#6b7280;font-family:Courier New,monospace;font-size:.85rem}.lock-mode{padding:.25rem .75rem;border-radius:.25rem;font-weight:600;font-size:.85rem;white-space:nowrap}.mode-exclusive{background:#dbeafe;color:#1e40af}.mode-shared{background:#d1fae5;color:#065f46}.lock-status{padding:.25rem .75rem;border-radius:.25rem;font-weight:600;font-size:.85rem;white-space:nowrap}.status-waiting{background:#fef3c7;color:#92400e}.status-held{background:#d1fae5;color:#065f46}.status-released{background:#f3f4f6;color:#6b7280}.lock-duration{font-family:Courier New,monospace;color:#6b7280;font-size:.85rem;min-width:4rem;text-align:right}.lock-waiting{background:#fffbeb;border-color:#fbbf24}.lock-held{background:#ecfdf5;border-color:#10b981}.lock-released{background:#f9fafb;border-color:#e5e7eb;opacity:.7}@media (max-width: 768px){.counter-display{font-size:1.5rem}.counter-display strong{font-size:2rem}.use-cases-grid{grid-template-columns:1fr}.lock-item{grid-template-columns:1fr;gap:.5rem}.lock-duration{text-align:left}}.channel-messaging-container{background:linear-gradient(to bottom,#fdf4ff,#fff)}.channel-messaging-container .showcase-header{background:linear-gradient(135deg,#d946ef,#a21caf)}.demo-area{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-bottom:2rem}@media (max-width: 768px){.demo-area{grid-template-columns:1fr}}.context-box{background:#fff;border-radius:.75rem;padding:1.5rem;box-shadow:0 4px 6px #00000012;border:1px solid #e5e7eb;display:flex;flex-direction:column}.context-box h3{margin-top:0;color:#4b5563;border-bottom:2px solid #f3f4f6;padding-bottom:.5rem;margin-bottom:1rem}.iframe-container{flex-grow:1;border:2px dashed #cbd5e1;border-radius:.5rem;overflow:hidden;min-height:300px;background:#f8fafc}.iframe-container iframe{width:100%;height:100%;border:none}.controls{display:flex;flex-direction:column;gap:1rem}.message-input-group{display:flex;gap:.5rem}.message-input-group input{flex-grow:1;padding:.5rem;border:1px solid #d1d5db;border-radius:.375rem}.btn-primary{background-color:#d946ef;color:#fff;border:none;padding:.5rem 1rem;border-radius:.375rem;cursor:pointer;font-weight:500;transition:background-color .2s}.btn-primary:hover{background-color:#c026d3}.btn-primary:disabled{background-color:#e5e7eb;cursor:not-allowed}.status-indicator{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:.5rem}.status-indicator.connected{background-color:#22c55e;box-shadow:0 0 0 2px #22c55e33}.status-indicator.disconnected{background-color:#ef4444}.log-display{background:#1e293b;color:#e2e8f0;padding:1rem;border-radius:.5rem;font-family:monospace;height:200px;overflow-y:auto;font-size:.875rem;margin-top:1rem}.log-entry{margin-bottom:.25rem;border-bottom:1px solid #334155;padding-bottom:.25rem}.log-entry:last-child{border-bottom:none}.log-timestamp{color:#94a3b8;margin-right:.5rem}.comparison-table{width:100%;border-collapse:collapse;margin-top:1rem}.comparison-table th,.comparison-table td{padding:1rem;text-align:left;border-bottom:1px solid #e5e7eb}.comparison-table th{background-color:#f9fafb;font-weight:600;color:#374151}.comparison-table tr:last-child td{border-bottom:none}.use-cases-section{background:#fff;border-radius:.75rem;padding:2rem;margin-bottom:2rem;box-shadow:0 4px 6px #00000012;border:1px solid #e5e7eb}.use-cases-section h2{font-size:1.75rem;margin-top:0;margin-bottom:1rem;color:#1f2937}.key-concepts{margin-top:1.5rem;padding:1.5rem;background:#fdf4ff;border-radius:.5rem;border-left:4px solid #d946ef}.key-concepts h3{margin-top:0;color:#a21caf}.key-concepts ul{margin:0;padding-left:1.5rem;display:block}.key-concepts li{list-style-type:disc;margin-bottom:.5rem;line-height:1.6}.key-concepts li:last-child{margin-bottom:0}.browser-support{background:#fff;border-radius:.75rem;padding:2rem;margin-bottom:2rem;box-shadow:0 4px 6px #00000012;border:1px solid #e5e7eb}.support-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1rem;margin-top:1.5rem}.support-item{display:flex;flex-direction:column;align-items:center;padding:1rem;background:#f8fafc;border-radius:.5rem;border:1px solid #e2e8f0}.browser-name{font-weight:600;color:#475569;margin-bottom:.5rem}.support-version{font-size:1.25rem;font-weight:700}.support-version.supported{color:#16a34a}.keyboard-api-container{--surface-card: #ffffff;--border-subtle: #e2e8f0;--text-primary: #1e293b;--text-secondary: #64748b;--surface-hover: #f8fafc;--primary-color: #3b82f6;display:flex;flex-direction:column;gap:2rem;background:linear-gradient(to bottom,#e8f2fc,#fff)}.keyboard-api-container .showcase-header{background:linear-gradient(135deg,#3b82f6,#1d4ed8)}.keyboard-api-container .content-wrapper{display:flex;flex-direction:column;gap:2rem}.feature-tag{background:#fff3;padding:.25rem .75rem;border-radius:1rem;font-size:.875rem;color:#fff;border:1px solid rgba(255,255,255,.3)}.keyboard-demo-section{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:12px;padding:1.5rem}.keyboard-demo-section h3{margin-top:0;margin-bottom:1rem;color:var(--text-primary)}.key-display{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:1rem;margin-top:1rem}.key-card{background:var(--surface-hover);padding:1rem;border-radius:8px;text-align:center;border:1px solid var(--border-subtle)}.key-code{font-size:.8rem;color:var(--text-secondary);margin-bottom:.5rem}.key-value{font-size:1.5rem;font-weight:700;color:var(--text-primary)}.lock-status{margin-bottom:1rem;padding:.5rem 1rem;border-radius:6px;background:var(--surface-hover);display:inline-block}.lock-status.active{background:#10b9811a;color:#10b981;border:1px solid rgba(16,185,129,.2)}.lock-status.inactive{background:#ef44441a;color:#ef4444;border:1px solid rgba(239,68,68,.2)}.game-area{height:200px;background:#1e293b;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;position:relative;overflow:hidden;outline:none;cursor:pointer}.game-area:focus{box-shadow:0 0 0 2px var(--primary-color)}.player{width:40px;height:40px;background:#3b82f6;border-radius:50%;position:absolute;transition:transform .1s ease-out;display:flex;align-items:center;justify-content:center;font-size:20px}.media-session-feature-container{--surface-card: #ffffff;--border-subtle: #e2e8f0;--text-primary: #1e293b;--text-secondary: #64748b;--surface-hover: #f8fafc;--primary-color: #8b5cf6;display:flex;flex-direction:column;gap:2rem;background:linear-gradient(to bottom,#f3e8ff,#fff)}.media-session-feature-container .showcase-header{background:linear-gradient(135deg,#8b5cf6,#6d28d9)}.media-session-feature-container .content-wrapper{display:flex;flex-direction:column;gap:2rem}.media-session-container{display:flex;flex-direction:column;align-items:center;gap:20px;padding:20px;background:var(--surface-card);border-radius:8px;max-width:400px;margin:0 auto}.media-cover{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;box-shadow:0 4px 12px #0003}.media-info{text-align:center}.media-title{font-size:1.2rem;font-weight:700;margin-bottom:4px;color:var(--text-primary)}.media-artist{color:var(--text-secondary);font-size:.9rem}.media-controls{display:flex;gap:16px;align-items:center}.media-btn{background:none;border:1px solid var(--text-primary);color:var(--text-primary);border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s}.media-btn:hover{background:var(--text-primary);color:var(--surface-card)}.media-btn.large{width:56px;height:56px;font-size:1.2rem}.status-log{margin-top:20px;padding:10px;background:#0000000d;border-radius:4px;font-family:monospace;font-size:.8rem;width:100%;color:var(--text-primary)}.status-log h3{margin:0 0 10px;font-size:.9rem;color:var(--text-secondary)}.api-toggle{display:flex;align-items:center;gap:1rem;margin-top:1rem;padding:1rem;background:var(--surface-hover);border-radius:.5rem}.toggle-switch{position:relative;display:inline-block;width:50px;height:24px}.toggle-switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.4s}.slider:before{position:absolute;content:"";height:16px;width:16px;left:4px;bottom:4px;background-color:#fff;transition:.4s}input:checked+.slider{background-color:var(--primary-color)}input:focus+.slider{box-shadow:0 0 1px var(--primary-color)}input:checked+.slider:before{transform:translate(26px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.relative-colors-container{background:linear-gradient(to bottom,#f0f9ff,#fff)}.relative-colors-container .showcase-header{background:linear-gradient(135deg,#3b82f6,#1d4ed8)}.color-selector{margin-bottom:2rem}.color-selector label{display:block;font-weight:600;color:#374151;margin-bottom:.75rem;font-size:1rem}.color-buttons{display:flex;gap:.75rem;flex-wrap:wrap}.color-btn{padding:.5rem 1.25rem;border:2px solid transparent;border-radius:.5rem;cursor:pointer;font-weight:600;color:#fff;transition:all .2s ease;box-shadow:0 2px 4px #0000001a}.color-btn:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0003}.color-btn.active{border-color:#1f2937;box-shadow:0 0 0 3px #3b82f64d;transform:scale(1.05)}.demo-boxes{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;margin-top:2rem}.color-box-container{display:flex;flex-direction:column;gap:.75rem}.color-box{height:120px;border-radius:.75rem;box-shadow:0 4px 6px #0000001a;border:2px solid rgba(0,0,0,.1);transition:transform .2s ease}.color-box:hover{transform:scale(1.02)}.color-box.opacity-80{background:rgb(from var(--base-color) r g b / .8)}.color-box.opacity-50{background:rgb(from var(--base-color) r g b / .5)}.color-box.opacity-20{background:rgb(from var(--base-color) r g b / .2)}.color-box.lighter{background:oklch(from var(--base-color) .85 c h)}.color-box.lighter-transparent{background:oklch(from var(--base-color) .85 c h / .5)}.color-box.darker{background:oklch(from var(--base-color) .35 c h)}.color-label{display:flex;flex-direction:column;gap:.25rem}.color-label strong{font-size:.9rem;color:#1f2937}.color-label code{background:#f3f4f6;padding:.25rem .5rem;border-radius:.25rem;font-size:.75rem;color:#4b5563;word-break:break-all;border:1px solid #e5e7eb}.benefit-card:hover{transform:translateY(-4px);box-shadow:0 4px 12px #0000001a;border-color:#3b82f6}@media (max-width: 768px){.demo-boxes{grid-template-columns:1fr}.color-buttons{flex-direction:column}.color-btn{width:100%}.benefits-grid{grid-template-columns:1fr}.support-grid{grid-template-columns:repeat(2,1fr)}}.has-container{background:linear-gradient(to bottom,#faf5ff,#fff)}.has-container .showcase-header{background:linear-gradient(135deg,#8b5cf6,#6d28d9)}.has-demo-container{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start}@media (max-width: 968px){.has-demo-container{grid-template-columns:1fr}}.validation-form{background:#fff;padding:2rem;border-radius:.75rem;border:2px solid #e5e7eb;transition:all .3s ease}.validation-form:has(input.invalid){border-color:#ef4444;background:#fef2f2;box-shadow:0 0 0 3px #ef44441a}.validation-form:not(:has(input.invalid)){border-color:#22c55e;background:#f0fdf4;box-shadow:0 0 0 3px #22c55e1a}.form-group{margin-bottom:1.5rem}.form-group:last-child{margin-bottom:0}.form-group label{display:block;font-weight:600;color:#374151;margin-bottom:.5rem;font-size:.9rem}.form-group input{width:100%;padding:.75rem;border:2px solid #d1d5db;border-radius:.5rem;font-size:1rem;transition:all .2s}.form-group input:focus{outline:none;border-color:#8b5cf6;box-shadow:0 0 0 3px #8b5cf61a}.form-group input.valid{border-color:#22c55e;background:#f0fdf4}.form-group input.invalid{border-color:#ef4444;background:#fef2f2}.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;margin-bottom:1rem}.dynamic-card{background:#fff;border:2px solid #e5e7eb;border-radius:.75rem;padding:1.5rem;position:relative;transition:all .3s ease;min-height:200px}.dynamic-card:has(.card-image-placeholder){border-color:#8b5cf6;background:linear-gradient(to bottom,#faf5ff,#fff)}.dynamic-card:has(.card-image-placeholder) .card-content{padding-top:0}.dynamic-card:has(.card-action){padding-bottom:5rem}.dynamic-card:has(.card-image-placeholder):has(.card-action){box-shadow:0 10px 30px #8b5cf64d;transform:translateY(-4px)}.card-image-placeholder{background:linear-gradient(135deg,#8b5cf6,#6d28d9);color:#fff;padding:3rem;border-radius:.5rem;text-align:center;font-size:2rem;margin-bottom:1rem}.card-content h3{margin:0 0 .5rem;color:#1f2937;font-size:1.1rem}.card-content p{margin:0;color:#6b7280;font-size:.9rem;line-height:1.5}.card-action{position:absolute;bottom:1.5rem;left:1.5rem;right:1.5rem;background:#8b5cf6;color:#fff;border:none;padding:.75rem;border-radius:.5rem;font-weight:600;cursor:pointer;transition:background .2s}.card-action:hover{background:#7c3aed}.card-controls{margin-top:1rem;padding-top:1rem;border-top:1px solid #e5e7eb;display:flex;gap:1rem;font-size:.85rem}.card-controls label{display:flex;align-items:center;gap:.25rem;cursor:pointer;color:#6b7280}.card-controls input[type=checkbox]{cursor:pointer}.list-examples{display:grid;grid-template-columns:1fr 1fr;gap:2rem}@media (max-width: 968px){.list-examples{grid-template-columns:1fr}}.list-column h4{margin-top:0;margin-bottom:1rem;color:#1f2937}.task-list{list-style:none;padding:0;margin:0}.task-list li{padding:1rem;margin-bottom:.5rem;background:#fff;border:2px solid #e5e7eb;border-radius:.5rem;border-left:4px solid #e5e7eb;display:flex;align-items:center;gap:.75rem;transition:all .3s ease}.task-list li:has(.priority-badge){background:#fef3c7;border-left-color:#f59e0b;border-left-width:4px}.task-list li:has(input:checked){opacity:.5}.task-list li:has(input:checked):has(.priority-badge){opacity:.7;background:#dcfce7;border-left-color:#22c55e}.task-list li input[type=checkbox]{width:1.25rem;height:1.25rem;cursor:pointer}.task-list li label{flex:1;cursor:pointer;color:#1f2937}.priority-badge{background:#fbbf24;color:#78350f;padding:.25rem .5rem;border-radius:.25rem;font-size:.75rem;font-weight:600}.benefit-card:hover{transform:translateY(-4px);box-shadow:0 4px 12px #0000001a;border-color:#8b5cf6}@media (max-width: 768px){.cards-grid,.benefits-grid{grid-template-columns:1fr}.support-grid{grid-template-columns:repeat(2,1fr)}}.interpolate-size-container{background:linear-gradient(to bottom,#fef3c7,#fff)}.interpolate-size-container .showcase-header{background:linear-gradient(135deg,#f59e0b,#d97706)}.old-accordion-container{display:flex;flex-direction:column;gap:.75rem}.old-accordion{background:#fff;border:2px solid #e5e7eb;border-radius:.75rem;overflow:hidden}.accordion-header{width:100%;padding:1rem 1.5rem;background:#fff;border:none;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-size:1rem;font-weight:600;color:#1f2937;transition:background .2s}.accordion-header:hover{background:#f9fafb}.accordion-icon{font-size:1.5rem;font-weight:700;color:#f59e0b}.old-accordion-content{max-height:0;overflow:hidden;transition:max-height .3s ease}.old-accordion.open .old-accordion-content{max-height:500px}.accordion-inner{padding:0 1.5rem 1.5rem}.accordion-inner p{margin:0 0 .5rem;color:#4b5563;line-height:1.6}.accordion-inner p:last-child{margin-bottom:0}.modern-accordion-container{display:flex;flex-direction:column;gap:.75rem;interpolate-size:allow-keywords}.modern-accordion{background:#fff;border:2px solid #e5e7eb;border-radius:.75rem;overflow:hidden}.modern-accordion-content{height:0;overflow:hidden;transition:height .3s ease}.modern-accordion.open .modern-accordion-content{height:auto}.cards-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem}.expandable-card{background:#fff;border:2px solid #e5e7eb;border-radius:.75rem;padding:1.5rem;position:relative;transition:all .3s ease;interpolate-size:allow-keywords}.expandable-card:hover{border-color:#f59e0b;box-shadow:0 4px 12px #f59e0b33}.card-preview h3{margin:0 0 .5rem;color:#1f2937;font-size:1.25rem}.card-preview p{margin:0;color:#6b7280;font-size:.9rem}.card-details{height:0;overflow:hidden;transition:height .4s ease;margin-top:0}.expandable-card.expanded .card-details{height:auto;margin-top:1rem}.card-details p{margin:0 0 .75rem;color:#4b5563;font-size:.9rem;line-height:1.6}.card-details p:last-child{margin-bottom:0}.expand-button{margin-top:1rem;width:100%;padding:.75rem;background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;border:none;border-radius:.5rem;font-weight:600;cursor:pointer;transition:all .2s}.expand-button:hover{transform:translateY(-2px);box-shadow:0 4px 8px #f59e0b4d}.explanation-box pre{margin:0}.explanation-box .code-block{background:#111827;padding:1rem;border-radius:.5rem;font-size:.85rem;overflow-x:auto}.benefit-card:hover{transform:translateY(-4px);box-shadow:0 4px 12px #0000001a;border-color:#f59e0b}@media (max-width: 768px){.cards-row,.benefits-grid{grid-template-columns:1fr}.support-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 480px){.support-grid{grid-template-columns:1fr}}@supports not (interpolate-size: allow-keywords){.modern-accordion-content{max-height:0;transition:max-height .3s ease}.modern-accordion.open .modern-accordion-content{max-height:500px}.card-details{max-height:0;transition:max-height .4s ease}.expandable-card.expanded .card-details{max-height:500px}}.text-wrap-container{background:linear-gradient(to bottom,#f0fdf4,#fff)}.text-wrap-container .showcase-header{background:linear-gradient(135deg,#22c55e,#16a34a)}.orphan-example{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:1.5rem}@media (max-width: 868px){.orphan-example{grid-template-columns:1fr}}.bad-wrap,.good-wrap{background:#fff;padding:1.5rem;border-radius:.75rem;border:2px solid #e5e7eb}.bad-wrap{border-color:#fca5a5;background:#fef2f2}.good-wrap{border-color:#86efac;background:#f0fdf4}.bad-wrap h3,.good-wrap h3{margin:0 0 1rem;font-size:.95rem;font-weight:600}.example-text{margin:0;font-size:1.1rem;line-height:1.6;color:#1f2937;max-width:40ch}.default-wrap{text-wrap:wrap}.pretty-wrap{text-wrap:pretty}.controls-row{display:flex;gap:2rem;margin-bottom:2rem;flex-wrap:wrap}.controls-row label{display:flex;align-items:center;gap:.5rem;font-weight:500;color:#374151;cursor:pointer}.controls-row input[type=radio]{cursor:pointer;width:1.25rem;height:1.25rem}.headlines-showcase{display:grid;grid-template-columns:1fr;gap:2rem}.headline-box{background:#fff;padding:2rem;border-radius:.75rem;border:2px solid #e5e7eb}.demo-headline{margin:0;font-size:2.5rem;font-weight:700;line-height:1.2;color:#1f2937;max-width:20ch}.demo-headline.wrap-wrap{text-wrap:wrap}.demo-headline.wrap-pretty{text-wrap:pretty}.demo-headline.wrap-balance{text-wrap:balance}.paragraphs-showcase{display:grid;grid-template-columns:1fr;gap:1.5rem}.paragraph-box{background:#fff;padding:2rem;border-radius:.75rem;border:2px solid #e5e7eb}.paragraph-box h4{margin:0 0 1rem;color:#16a34a;font-size:.9rem;text-transform:uppercase;letter-spacing:.05em}.demo-paragraph{margin:0;font-size:1.1rem;line-height:1.7;color:#374151;max-width:65ch}.demo-paragraph.wrap-wrap{text-wrap:wrap}.demo-paragraph.wrap-pretty{text-wrap:pretty}.use-cases-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem}.use-case-card{background:#fff;padding:2rem;border-radius:.75rem;border:2px solid #e5e7eb;transition:all .2s}.use-case-card:hover{border-color:#22c55e;box-shadow:0 4px 12px #22c55e33}.card-header{display:flex;align-items:center;gap:.75rem;margin-bottom:1.5rem}.card-header .icon{font-size:2rem}.card-header h3{margin:0;font-size:1.1rem;color:#1f2937}.quote{margin:0;font-size:1.25rem;font-style:italic;line-height:1.6;color:#4b5563;border-left:4px solid #22c55e;padding-left:1.5rem}.author{margin:1rem 0 0;font-size:.95rem;color:#6b7280;font-weight:600}.cta-button{width:100%;padding:1rem 2rem;margin-bottom:1rem;background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;border:none;border-radius:.5rem;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .2s}.cta-button:last-child{margin-bottom:0}.cta-button:hover{transform:translateY(-2px);box-shadow:0 4px 12px #22c55e4d}.feature-list{list-style:none;padding:0;margin:0}.feature-list li{padding:.75rem 0;border-bottom:1px solid #e5e7eb;font-size:1rem;color:#374151;line-height:1.6}.feature-list li:last-child{border-bottom:none}.feature-list li:before{content:"✓ ";color:#22c55e;font-weight:700;margin-right:.5rem}.product-card h4{margin:0 0 .75rem;font-size:1.25rem;color:#1f2937}.product-card p{margin:0 0 1rem;color:#6b7280;line-height:1.6}.price{display:block;font-size:2rem;font-weight:700;color:#22c55e}.explanation-box{background:#1f2937;padding:1.5rem;border-radius:.75rem;color:#f3f4f6}.explanation-box h4{margin-top:0;margin-bottom:1rem;color:#f9fafb;font-size:1.1rem}.code-examples-section{background:#fff;border-radius:.75rem;padding:2rem;margin-bottom:2rem;box-shadow:0 4px 6px #00000012;border:1px solid #e5e7eb}.code-examples-section h2{font-size:1.75rem;margin-top:0;margin-bottom:1.5rem;color:#1f2937}.code-block{background:#1f2937;color:#f3f4f6;padding:1.5rem;border-radius:.5rem;overflow-x:auto;font-family:Courier New,Courier,monospace;font-size:.9rem;line-height:1.6}.code-description{color:#6b7280;font-style:italic;margin-bottom:1rem;padding:0 1.5rem}.benefits-section{margin-top:2rem}.benefits-section h2{font-size:1.75rem;margin-bottom:1.5rem;color:#1f2937}.benefits-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem}.benefit-card{background:#f9fafb;border-radius:.75rem;padding:1.5rem;border:1px solid #e5e7eb;transition:all .2s ease}.benefit-card:hover{transform:translateY(-4px);box-shadow:0 4px 12px #0000001a;border-color:#22c55e}.benefit-icon{font-size:2rem;margin-bottom:.75rem}.benefit-card h3{font-size:1.1rem;margin:0 0 .5rem;color:#1f2937}.benefit-card p{margin:0;color:#6b7280;font-size:.95rem;line-height:1.5}.benefit-card code{background:#e5e7eb;padding:.15rem .4rem;border-radius:.25rem;font-size:.85rem}.support-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem}.support-item{display:flex;flex-direction:column;align-items:center;padding:1rem;background:#f9fafb;border-radius:.5rem;border:1px solid #e5e7eb}.browser-name{font-weight:600;color:#374151;margin-bottom:.5rem}.support-version{font-size:.9rem;padding:.25rem .75rem;border-radius:.25rem}.support-version.supported{background:#dcfce7;color:#166534;font-weight:600}.support-version.not-supported{background:#fee2e2;color:#991b1b}@media (max-width: 768px){.demo-headline{font-size:2rem}.use-cases-grid,.benefits-grid{grid-template-columns:1fr}.support-grid{grid-template-columns:repeat(2,1fr)}.controls-row{flex-direction:column;gap:1rem}}@media (max-width: 480px){.support-grid{grid-template-columns:1fr}.demo-headline{font-size:1.75rem}}.web-animations-container{background:linear-gradient(to bottom,#f0f9ff,#fff)}.web-animations-container .showcase-header{background:linear-gradient(135deg,#3b82f6,#1d4ed8)}.animation-demo{background:#fff;padding:3rem;border-radius:.75rem;border:2px solid #e5e7eb;display:flex;flex-direction:column;align-items:center;gap:2rem;min-height:300px;position:relative}.animated-box{width:100px;height:100px;background:#3b82f6;color:#fff;display:flex;align-items:center;justify-content:center;border-radius:.5rem;font-weight:600;box-shadow:0 4px 6px #0000001a}.bouncing-ball{font-size:4rem;width:80px;height:80px;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 10px 20px rgba(0,0,0,.2))}.animated-card{width:150px;height:150px;background:#3b82f6;color:#fff;display:flex;align-items:center;justify-content:center;border-radius:1rem;font-weight:700;font-size:1.1rem;text-align:center;padding:1rem;box-shadow:0 10px 30px #0003}.control-button{background:#3b82f6;color:#fff;border:none;padding:.75rem 1.5rem;border-radius:.5rem;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s;box-shadow:0 2px 4px #0000001a}.control-button:hover:not(:disabled){background:#2563eb;transform:translateY(-2px);box-shadow:0 4px 8px #00000026}.control-button:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 4px #0000001a}.control-button:disabled{background:#9ca3af;cursor:not-allowed;opacity:.6}.control-panel{display:flex;flex-direction:column;gap:1.5rem;align-items:center;width:100%}.button-group{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center}.speed-control{display:flex;flex-direction:column;gap:.5rem;align-items:center;width:100%;max-width:300px}.speed-control label{font-weight:600;color:#374151;font-size:.95rem}.speed-control input[type=range]{width:100%;height:6px;background:#e5e7eb;border-radius:3px;outline:none;-webkit-appearance:none}.speed-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;background:#3b82f6;cursor:pointer;border-radius:50%;box-shadow:0 2px 4px #0003}.speed-control input[type=range]::-moz-range-thumb{width:20px;height:20px;background:#3b82f6;cursor:pointer;border-radius:50%;border:none;box-shadow:0 2px 4px #0003}.speed-control input[type=range]:disabled{opacity:.5;cursor:not-allowed}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin-top:1rem}.feature-card{background:#fff;padding:1.5rem;border-radius:.75rem;border:2px solid #e5e7eb;transition:all .2s}.feature-card:hover{border-color:#3b82f6;box-shadow:0 4px 12px #3b82f626;transform:translateY(-2px)}.feature-card h3{margin-top:0;margin-bottom:.75rem;color:#1f2937;font-size:1.1rem}.feature-card p{margin:0;color:#6b7280;font-size:.95rem;line-height:1.6}.browser-support{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-top:1rem}.browser-item{background:#fff;padding:1rem 1.5rem;border-radius:.5rem;border:2px solid #22c55e;display:flex;justify-content:space-between;align-items:center}.browser-name{font-weight:600;color:#374151}.browser-version{color:#22c55e;font-weight:600}.code-details{background:#fff;border:2px solid #e5e7eb;border-radius:.75rem;padding:0;margin:1rem 0}.code-details summary{padding:1rem 1.5rem;cursor:pointer;font-weight:600;color:#1f2937;-webkit-user-select:none;user-select:none;transition:background .2s;border-radius:.75rem}.code-details summary:hover{background:#f9fafb}.code-details[open] summary{border-bottom:2px solid #e5e7eb;border-radius:.75rem .75rem 0 0}.code-description{padding:1rem 1.5rem 0;color:#6b7280;font-size:.95rem;margin:0}.code-details pre{margin:1rem 1.5rem 1.5rem;background:#1f2937;border-radius:.5rem;overflow-x:auto}.code-details .code-block{display:block;padding:1.5rem;font-size:.9rem;line-height:1.6;color:#f3f4f6;background:transparent}@media (max-width: 768px){.animation-demo{padding:2rem 1rem}.button-group{flex-direction:column;width:100%}.button-group button{width:100%}.features-grid,.browser-support{grid-template-columns:1fr}}.home-container{padding:2rem;max-width:800px;margin:0 auto}.hy-section{margin-bottom:2rem;border:1px solid #ccc;padding:1rem;border-radius:8px}.feature-list{list-style:none;padding:0}.feature-list li{margin:.5rem 0}.feature-list a{text-decoration:none;color:#007bff;font-size:1.1rem}.feature-list a:hover{text-decoration:underline}.app-container{min-height:100vh;display:flex;flex-direction:column}.app-nav{position:sticky;top:0;z-index:100;background:#fff;border-bottom:2px solid #e5e7eb;box-shadow:0 2px 8px #0000000d}.nav-tabs{max-width:1200px;margin:0 auto;padding:0 2rem;display:flex;gap:.5rem}.nav-tab{padding:.75rem 1rem;font-size:.875rem;font-weight:600;border:none;background:transparent;color:#6b7280;cursor:pointer;border-bottom:3px solid transparent;transition:all .2s;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}.nav-tab:hover{color:#1f2937;background:#f9fafb}.nav-tab.active{color:#3b82f6;border-bottom-color:#3b82f6}.app-content{flex:1;background:linear-gradient(to bottom,#f8f9fa,#fff)}@media (max-width: 768px){.nav-tabs{padding:0 1rem;gap:0;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}.nav-tab{padding:.75rem 1rem;text-align:left;border-bottom:1px solid #e5e7eb;border-left:3px solid transparent;flex-shrink:0}.nav-tab.active{border-bottom-color:#e5e7eb;border-left-color:#3b82f6;background:#f0f9ff}}