@import "https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap";
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.sticky{position:sticky}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.table{display:table}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.resize{resize:both}.border{border-style:var(--tw-border-style);border-width:1px}.capitalize{text-transform:capitalize}.lowercase{text-transform:lowercase}.uppercase{text-transform:uppercase}.underline{text-decoration-line:underline}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}:root{--nav-bg:#fff;--hero-bg:#0a1628;--content-bg:#e8f5ec;--card-bg:#fff;--card-bg-alt:#d4edda;--accent-blue:#1d4ed8;--accent-blue-bright:#2563eb;--accent-orange:#c2410c;--accent-orange-bright:#ea580c;--accent-green:#15803d;--accent-green-bright:#16a34a;--accent-cyan:#06b6d4;--accent-cyan-bright:#22d3ee;--text-primary:#050505;--text-secondary:#374151;--text-muted:#6b7280;--border:#c8dece;--border-hover:#a3c4ab;--border-grey:#d1d5db;--font-display:"Syne", sans-serif;--font-body:"IBM Plex Sans", sans-serif;--font-mono:"IBM Plex Mono", monospace}@media (prefers-color-scheme:dark){:root{--nav-bg:#080808;--hero-bg:#020b16;--content-bg:#0a1a0d;--card-bg:#111a13;--card-bg-alt:#162b1a;--text-primary:#f5f5f5;--text-secondary:#9db8a4;--text-muted:#4d6654;--border:#1e3324;--border-hover:#2e4d36;--border-grey:#1a2e1e;--accent-green:#16a34a;--accent-green-bright:#22c55e;--accent-cyan:#06b6d4;--accent-cyan-bright:#22d3ee}}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background-color:var(--content-bg);color:var(--text-primary);font-family:var(--font-body);-webkit-font-smoothing:antialiased}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:var(--content-bg)}::-webkit-scrollbar-thumb{background:var(--border-hover);border-radius:3px}::selection{background:var(--accent-cyan);color:#020b16}.dot-grid{background-image:radial-gradient(circle,#06b6d424 1px,#0000 1px);background-size:26px 26px}.card-lift{transition:transform .2s,box-shadow .2s,border-color .2s}.card-lift:hover{border-color:var(--border-hover);transform:translateY(-3px);box-shadow:0 8px 28px #06b6d426}.btn-cta{background:var(--accent-cyan);color:#020b16;font-family:var(--font-body);cursor:pointer;white-space:nowrap;border:none;border-radius:999px;align-items:center;gap:.4rem;padding:.65rem 1.6rem;font-size:.875rem;font-weight:600;text-decoration:none;transition:background .2s,transform .15s,box-shadow .2s;display:inline-flex;box-shadow:0 2px 12px #06b6d459}.btn-cta:hover{background:var(--accent-cyan-bright);transform:translateY(-1px);box-shadow:0 4px 18px #06b6d480}.btn-outline{border:1.5px solid var(--border-hover);color:var(--text-primary);background:var(--card-bg);font-family:var(--font-body);cursor:pointer;white-space:nowrap;border-radius:999px;align-items:center;gap:.4rem;padding:.62rem 2rem;font-size:.875rem;font-weight:500;text-decoration:none;transition:border-color .2s,color .2s,box-shadow .2s;display:inline-flex}.btn-outline:hover{border-color:var(--accent-cyan);color:var(--accent-cyan);box-shadow:0 0 0 3px #06b6d41f}.btn-ghost{color:#b0c4d8;font-family:var(--font-body);cursor:pointer;white-space:nowrap;background:0 0;border:1.5px solid #2d4a6a;border-radius:8px;align-items:center;gap:.4rem;padding:.52rem 1rem;font-size:.85rem;font-weight:500;text-decoration:none;transition:border-color .2s,color .2s,background .2s;display:inline-flex}.btn-ghost:hover{border-color:var(--accent-cyan);color:var(--accent-cyan);background:#06b6d40f}.share-btn{font-family:var(--font-body);color:var(--text-secondary);background:var(--card-bg);border:1.5px solid var(--border);cursor:pointer;border-radius:8px;align-items:center;gap:.3rem;padding:.35rem .75rem;font-size:.75rem;font-weight:500;text-decoration:none;transition:border-color .15s,color .15s,box-shadow .15s;display:inline-flex}.share-btn:hover{border-color:var(--accent-cyan);color:var(--accent-cyan);box-shadow:0 0 0 3px #06b6d41a}.input{border:1.5px solid var(--border);color:var(--text-primary);font-family:var(--font-body);background:#edf7f0;border-radius:8px;outline:none;width:100%;padding:.6rem .9rem;font-size:.875rem;transition:border-color .2s,box-shadow .2s}.input:focus{border-color:var(--accent-cyan);box-shadow:0 0 0 3px #06b6d41f}.input::placeholder{color:var(--text-muted)}textarea.input{resize:vertical;min-height:100px}.label{font-family:var(--font-mono);color:var(--text-secondary);letter-spacing:.05em;text-transform:uppercase;margin-bottom:.4rem;font-size:.7rem;font-weight:500;display:block}.eyebrow{font-family:var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-cyan);text-shadow:0 0 12px #06b6d466;font-size:.68rem;font-weight:500}.display-heading{font-family:var(--font-display);letter-spacing:-.03em;font-weight:800;line-height:1.02}.search-input{background:var(--card-bg);border:1.5px solid var(--border);color:var(--text-primary);font-family:var(--font-body);border-radius:8px;outline:none;width:100%;padding:.52rem 1rem .52rem 2.3rem;font-size:.875rem;transition:border-color .2s,box-shadow .2s}.search-input:focus{border-color:var(--accent-cyan);box-shadow:0 0 0 3px #06b6d41f}.search-input::placeholder{color:var(--text-muted)}mark{color:#0e4f5c;background:#a5f3fc;border-radius:2px;padding:0 2px;font-style:normal}.form-section{border:1px solid var(--border);background:var(--card-bg);border-radius:12px;margin-bottom:1.25rem;padding:1.5rem}.form-section-title{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--accent-cyan);border-bottom:1px solid var(--border);margin-bottom:1rem;padding-bottom:.6rem;font-size:.68rem;font-weight:500}.form-grid{grid-template-columns:1fr 1fr;gap:1rem;display:grid}.form-field{flex-direction:column;gap:.35rem;display:flex}.form-field.full{grid-column:1/-1}.tag-pill{font-family:var(--font-mono);cursor:pointer;border:1px solid;border-radius:999px;align-items:center;gap:.3rem;padding:.1rem .42rem;font-size:.58rem;font-weight:500;transition:opacity .15s,box-shadow .15s;display:inline-flex}.tag-pill:hover{opacity:.85;box-shadow:0 0 0 2px #06b6d433}.hero-grid{grid-template-columns:1fr 1fr;align-items:center;gap:2rem;min-height:420px;display:grid}.hero-graphic{justify-content:center;align-items:center;height:100%;min-height:340px;display:flex;position:relative}.hero-layout{grid-template-columns:1fr 1fr;align-items:stretch;min-height:380px;display:grid}.hero-text{flex-direction:column;justify-content:center;padding:3rem 2rem 3rem 0;display:flex}.hero-image-panel{min-height:300px;position:relative;overflow:hidden}.hero-image-fade{background:linear-gradient(to right, var(--hero-bg) 0%, transparent 28%);pointer-events:none;z-index:1;position:absolute;inset:0}.toolbar{background:var(--card-bg);border-top:1px solid var(--border-grey);border-bottom:1px solid var(--border);padding:.85rem 1.5rem}.nav-links{align-items:center;gap:1.25rem;display:flex}.nav-github{border:1.5px solid var(--border-grey);font-size:.78rem;font-family:var(--font-body);color:var(--text-primary);white-space:nowrap;background:var(--card-bg);border-radius:999px;align-items:center;gap:.35rem;padding:.35rem .9rem;font-weight:500;text-decoration:none;transition:border-color .2s,color .2s,box-shadow .2s;display:inline-flex}.nav-github:hover{border-color:var(--accent-cyan);color:var(--accent-cyan);box-shadow:0 0 0 3px #06b6d41a}.toc-sidebar{display:block!important}.tutorial-grid{grid-template-columns:1fr 240px;align-items:start;gap:3rem;display:grid}@keyframes spin{to{transform:rotate(360deg)}}.desktop-nav{display:flex}.mobile-nav-row,.hamburger-btn,.mobile-search-btn{display:none}@media (max-width:900px){.toc-sidebar{display:none!important}.tutorial-grid{grid-template-columns:1fr}}@media (max-width:768px){.desktop-nav{display:none!important}.mobile-nav-row{align-items:center;gap:.5rem;display:flex!important}.hamburger-btn{border:1.5px solid var(--border-hover);cursor:pointer;color:var(--text-primary);background:0 0;border-radius:8px;justify-content:center;align-items:center;padding:.38rem .45rem;display:inline-flex!important}.mobile-search-btn{border:1.5px solid var(--border-hover);cursor:pointer;color:var(--text-secondary);background:0 0;border-radius:8px;justify-content:center;align-items:center;padding:.38rem .45rem;display:inline-flex!important}.hero-layout{grid-template-columns:1fr;min-height:auto}.hero-text{padding:2.5rem 0}.hero-image-panel{display:none}.hero-grid{grid-template-columns:1fr;min-height:auto}.hero-graphic{display:none}}@media (max-width:640px){.form-grid{grid-template-columns:1fr}.form-section{padding:1rem}}@media (max-width:480px){.btn-cta,.btn-outline,.btn-ghost{padding:.58rem 1.1rem;font-size:.82rem}.hero-ctas{flex-direction:column;align-items:flex-start}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}
