:root{--color-primary: #00aeef;--color-text-base: #374151;--color-text-heading: #111827;--color-text-muted: #6b7280;--color-bg-light: #ffffff;--color-bg-dark: #161616;--color-bg-dark-accent: #2a2a2a;--color-bg-subtle: #f3f4f6;--color-border: #e5e7eb;--font-sans: "Inter", sans-serif}html.dark{--color-text-base: #d1d5db;--color-text-heading: #ffffff;--color-text-muted: #9ca3af;--color-bg-light: #161616;--color-bg-dark: #ffffff;--color-bg-subtle: #2a2a2a;--color-border: #374151}html{scroll-behavior:smooth}body{font-family:var(--font-sans);background-color:var(--color-bg-light);color:var(--color-text-base);transition:background-color .3s ease,color .3s ease}#preloader{position:fixed;top:0;left:0;right:0;bottom:0;background-color:var(--color-bg-light);z-index:9999;display:flex;justify-content:center;align-items:center;opacity:1;transition:opacity .5s ease-out,visibility .5s ease-out;visibility:visible}#preloader #preloader-message{color:var(--color-text-heading);transition:opacity .2s ease-in-out}#preloader.fade-out{opacity:0;visibility:hidden}.tutorial-spotlight{position:fixed;border-radius:8px;box-shadow:0 0 0 9999px #0c0c0cbf;transition:all .4s cubic-bezier(.4,0,.2,1);pointer-events:none;z-index:9998}.tutorial-popup{position:fixed;background-color:var(--color-bg-dark-accent);color:var(--color-text-base);padding:1rem 1.5rem;border-radius:8px;max-width:350px;border:1px solid #374151;box-shadow:0 10px 25px #0000004d;z-index:9999;transition:all .4s cubic-bezier(.4,0,.2,1),opacity .3s ease;opacity:0;transform:translateY(10px)}.tutorial-popup.visible{opacity:1;transform:translateY(0)}.bracket-round{display:flex;flex-direction:column;justify-content:space-around;flex-basis:240px;flex-grow:1}.match-item-container{display:flex;align-items:center;flex-grow:1;position:relative}.match-content{flex-grow:1}.bracket-connector{width:2rem;align-self:stretch;position:relative}.bracket-connector:before{content:"";position:absolute;top:50%;left:0;width:100%;border-bottom:2px solid var(--color-primary)}.match-item-container:nth-of-type(2n-1) .bracket-connector:after{content:"";position:absolute;top:50%;right:-1px;height:calc(100% + 1.5rem);border-right:2px solid var(--color-primary);border-radius:0 .5rem .5rem 0}@media (max-width: 768px){.bracket-round{flex-basis:200px;min-width:200px}}.blog-content{color:var(--color-text-base);line-height:1.75}.blog-content h1,.blog-content h2,.blog-content h3,.blog-content h4{color:var(--color-text-heading);margin-top:1.5em;margin-bottom:.5em;font-weight:700;line-height:1.3}.blog-content h1{font-size:2.25rem}.blog-content h2{font-size:1.875rem}.blog-content h3{font-size:1.5rem}.blog-content h4{font-size:1.25rem}.blog-content p{margin-bottom:1.25em}.blog-content a{color:var(--color-primary);text-decoration:underline;transition:color .2s ease-in-out}.blog-content a:hover{opacity:.8}.blog-content ul,.blog-content ol{margin-left:1.5em;margin-bottom:1.25em;padding-left:1.5em}.blog-content ul{list-style-type:disc}.blog-content ol{list-style-type:decimal}.blog-content li{margin-bottom:.5em;padding-left:.5em}.blog-content blockquote{border-left:4px solid var(--color-primary);padding-left:1em;margin:0 0 1.25em;font-style:italic;color:var(--color-text-muted)}.blog-content pre{background-color:var(--color-bg-subtle);border:1px solid var(--color-border);padding:1em;border-radius:.5rem;overflow-x:auto;margin-bottom:1.25em}.blog-content code{background-color:var(--color-bg-subtle);padding:.2em .4em;border-radius:.25rem;font-family:monospace;color:var(--color-primary);font-size:.9em}.blog-content pre>code{background-color:transparent;padding:0;border:none;color:inherit;font-size:inherit}