:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400}body{margin:0}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-entry:last-child{border-bottom:none}.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}}.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:1rem 2rem;font-size:1rem;font-weight:600;border:none;background:transparent;color:#6b7280;cursor:pointer;border-bottom:3px solid transparent;transition:all .2s;position:relative}.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;flex-direction:column;gap:0}.nav-tab{padding:.75rem 1rem;text-align:left;border-bottom:1px solid #e5e7eb;border-left:3px solid transparent}.nav-tab.active{border-bottom-color:#e5e7eb;border-left-color:#3b82f6;background:#f0f9ff}}