:root{--bg:#07080c;--surface:#0c0e15;--surface-2:#10131c;--border:#ffffff0f;--border-hi:#ffffff21;--text:#c4c8db;--text-mid:#8892a4;--text-dim:#4a5268;--green:#39ff8a;--green-dim:#39ff8a14;--green-glow:#39ff8a40;--purple:#86f;--purple-dim:#8866ff14;--amber:#ffc940;--amber-dim:#ffc94014;--red:#f56;--font:"IBM Plex Mono", monospace;--r:3px;--fs-xs:11px;--fs-sm:12px;--fs-md:13px;--fs-base:15px;--fs-lg:18px;--header-h:58px;--nav-h:40px;--footer-h:36px;--surface-hover:#ffffff0a;--surface-hover-dim:#ffffff04;--focus-ring:#39ff8a66;--green-border:#39ff8a4d;--amber-border:#ffc94066;--label-bg:#07080cb8;--dot-border:#ffffff1f}@media (prefers-color-scheme:light){:root{--bg:#f0f2f8;--surface:#fff;--surface-2:#e8eaf2;--border:#00000014;--border-hi:#00000026;--text:#111827;--text-mid:#4b5570;--text-dim:#7880a0;--green:#0d8040;--green-dim:#0d80401a;--green-glow:#0d80404d;--purple:#53c;--purple-dim:#5533cc1a;--amber:#a07000;--amber-dim:#a070001a;--red:#c23;--surface-hover:#0000000a;--surface-hover-dim:#00000005;--focus-ring:#0d804073;--green-border:#0d804059;--amber-border:#a0700066;--label-bg:#fafbffe0;--dot-border:#0000001f}}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--bg);height:100%;color:var(--text);font-family:var(--font);font-size:var(--fs-base);-webkit-font-smoothing:antialiased;line-height:1.5;overflow:hidden}header{height:var(--header-h);border-bottom:1px solid var(--border);background:var(--bg);align-items:center;gap:20px;padding:0 20px;display:flex}.wordmark{font-size:var(--fs-lg);letter-spacing:-.02em;flex-shrink:0;font-weight:600;line-height:1}.w-lib{color:var(--text)}.w-dot{color:var(--text-dim);margin:0 1px}.w-mod{color:var(--green)}.header-desc{color:var(--text-mid);flex:1;font-weight:300}.header-desc a{color:var(--text-mid);text-decoration:none}.breadcrumb-sep{color:var(--text-dim);margin:0 4px}.breadcrumb-current{color:var(--text);font-weight:500}.header-link{color:var(--text-mid);border:1px solid var(--border);border-radius:var(--r);white-space:nowrap;padding:4px 10px;text-decoration:none;transition:color .12s,border-color .12s}.header-link:hover{color:var(--text);border-color:var(--border-hi)}.nav-dropdown{position:relative}.nav-dropdown>summary{cursor:pointer;color:var(--text-mid);border:1px solid var(--border);border-radius:var(--r);white-space:nowrap;font-family:var(--font);font-size:inherit;-webkit-user-select:none;user-select:none;padding:4px 10px;list-style:none;transition:color .12s,border-color .12s}.nav-dropdown>summary::-webkit-details-marker{display:none}.nav-dropdown>summary::marker{content:""}.nav-dropdown>summary:after{content:" ▾";transform-origin:50% 55%;font-size:.75em;transition:transform .15s;display:inline-block}.nav-dropdown[open]>summary:after{transform:rotate(180deg)}.nav-dropdown>summary:hover,.nav-dropdown[open]>summary{color:var(--text);border-color:var(--border-hi)}.dropdown-menu{background:var(--surface);border:1px solid var(--border-hi);border-radius:var(--r);z-index:100;min-width:200px;animation:.1s dropIn;position:absolute;top:calc(100% + 6px);right:0;overflow:hidden}@keyframes dropIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.dropdown-item{color:var(--text-mid);border-bottom:1px solid var(--border);white-space:nowrap;padding:8px 14px;text-decoration:none;transition:background .1s,color .1s;display:block}.dropdown-item:last-child{border-bottom:none}.dropdown-item:hover{background:var(--surface-hover);color:var(--text)}.tab-nav{height:var(--nav-h);border-bottom:1px solid var(--border);background:var(--bg);align-items:stretch;gap:2px;padding:0 20px;display:flex}.tab-btn{color:var(--text-mid);font-family:var(--font);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;white-space:nowrap;background:0 0;border:none;border-bottom:2px solid #0000;margin-bottom:-1px;padding:0 14px;font-weight:500;transition:color .1s}.tab-btn:hover{color:var(--text)}.tab-btn.active{color:var(--green);border-bottom-color:var(--green)}.main{height:calc(100vh - var(--header-h) - var(--nav-h) - var(--footer-h));grid-template-columns:35vw 1fr;display:grid}.col-left{border-right:1px solid var(--border);flex-direction:column;display:flex;overflow:hidden}.tab-desc{border-bottom:1px solid var(--border);color:var(--text-mid);flex-shrink:0;padding:10px 20px;font-style:italic;font-weight:300}.examples{flex:1;min-height:0;overflow:hidden auto}.example-item{border-bottom:1px solid var(--border)}.example-header{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:10px;padding:11px 20px;transition:background .1s;display:flex}.example-header:hover{background:var(--surface-hover-dim)}.example-item.active .example-header{background:var(--green-dim)}.example-num{color:var(--text-dim);flex-shrink:0;width:16px}.example-item.active .example-num{color:var(--green)}.example-meta{flex:1;min-width:0}.example-title{color:var(--text);font-weight:500;line-height:1.3}.example-item.active .example-title{color:var(--green)}.example-preview{color:var(--text-dim);white-space:nowrap;text-overflow:ellipsis;margin-top:1px;overflow:hidden}.example-item.active .example-preview{color:var(--text-mid)}.example-chevron{color:var(--text-dim);flex-shrink:0;transition:transform .15s}.example-item.active .example-chevron{color:var(--green);transform:rotate(90deg)}.example-body{padding:0 20px 14px;animation:.12s fadeIn;display:none}.example-item.active .example-body{display:block}@keyframes fadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.example-result{color:var(--amber);background:var(--amber-dim);border-left:2px solid var(--amber-border);border-radius:0 var(--r) var(--r) 0;word-break:break-all;margin-bottom:12px;padding:5px 10px;font-weight:500;line-height:1.5}.inputs-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px 12px;display:grid}.input-group{flex-direction:column;gap:5px;display:flex}.input-label{color:var(--text-mid);letter-spacing:.04em;font-weight:500}.input-row{align-items:center;gap:6px;display:flex}.input-slider{appearance:none;background:var(--border-hi);cursor:pointer;border-radius:1px;outline:none;flex:1;height:2px}.input-slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--green);cursor:pointer;width:10px;height:10px;box-shadow:0 0 8px var(--green-glow);border-radius:50%;transition:box-shadow .1s}.input-slider::-webkit-slider-thumb:hover{box-shadow:0 0 12px var(--green-glow)}.input-slider::-moz-range-thumb{background:var(--green);cursor:pointer;border:none;border-radius:50%;width:10px;height:10px}.input-number{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);width:54px;color:var(--text);font-family:var(--font);text-align:right;outline:none;flex-shrink:0;padding:2px 5px;transition:border-color .1s}.input-number:focus{border-color:var(--focus-ring)}.tryit{border-top:1px solid var(--border);background:var(--surface);flex-shrink:0;padding:12px 20px}.tryit-header{justify-content:space-between;align-items:center;margin-bottom:7px;display:flex}.tryit-label{letter-spacing:.12em;text-transform:uppercase;color:var(--text-mid);font-weight:600}.tryit-hint{color:var(--text-dim);font-style:italic}.tryit-input{background:var(--bg);border:1px solid var(--border);border-radius:var(--r);width:100%;color:var(--text);font-family:var(--font);resize:none;outline:none;padding:7px 10px;line-height:1.6;transition:border-color .1s}.tryit-input:focus{border-color:var(--border-hi)}.tryit-output{align-items:flex-start;gap:8px;min-height:18px;margin-top:6px;display:flex}.output-prompt{color:var(--green);flex-shrink:0;line-height:1.3}.output-value{color:var(--amber);word-break:break-word;line-height:1.5}.output-value.err{color:var(--red)}.col-right{background:var(--surface);flex-direction:column;display:flex;overflow:hidden}.canvas-wrap{flex:1;justify-content:center;align-items:center;min-height:0;padding:16px;display:flex}#canvas{border-radius:var(--r);border:1px solid var(--border);display:block}.canvas-legend{border-top:1px solid var(--border);flex-wrap:wrap;flex-shrink:0;gap:14px;min-height:33px;padding:8px 14px;display:flex}.legend-item{color:var(--text-mid);align-items:center;gap:6px;display:flex}.legend-swatch{border-radius:1px;flex-shrink:0;width:20px;height:2px}.intro{border-bottom:1px solid var(--border);flex-shrink:0;padding:12px 20px}.intro-text{color:var(--text-mid);margin-bottom:8px;font-weight:300;line-height:1.7}.intro-install{margin-bottom:8px}.install-cmd{font-family:var(--font);color:var(--green);background:var(--green-dim);border-left:2px solid var(--green-border);border-radius:0 var(--r) var(--r) 0;letter-spacing:.01em;padding:4px 12px;display:inline-block}.intro-links{gap:12px;display:flex}.intro-link{color:var(--text-dim);letter-spacing:.04em;text-decoration:none;transition:color .12s}.intro-link:hover{color:var(--text-mid)}footer{height:var(--footer-h);border-top:1px solid var(--border);background:var(--bg);color:var(--text-dim);flex-shrink:0;align-items:center;gap:10px;padding:0 20px;display:flex}.footer-sep{color:var(--text-dim);opacity:.4}.footer-link{color:var(--text-dim);text-decoration:none;transition:color .12s}.footer-link:hover{color:var(--text-mid)}.footer-right{margin-left:auto}.demo-main{height:calc(100vh - var(--header-h) - var(--footer-h));grid-template-columns:35vw 1fr;display:grid}.demo-controls{border-right:1px solid var(--border);flex-direction:column;gap:14px;padding:14px 18px;display:flex;overflow:hidden auto}.ctrl-section{flex-direction:column;gap:8px;display:flex}.ctrl-section h3{font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--text-mid);border-bottom:1px solid var(--border);padding-bottom:5px;font-weight:600}.ctrl-row{align-items:center;gap:7px;display:flex}.ctrl-label{color:var(--text-mid);flex-shrink:0}.ctrl-slider{appearance:none;background:var(--border-hi);cursor:pointer;border-radius:1px;outline:none;flex:1;height:2px}.ctrl-slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--green);cursor:pointer;width:10px;height:10px;box-shadow:0 0 8px var(--green-glow);border-radius:50%;transition:box-shadow .1s}.ctrl-slider::-webkit-slider-thumb:hover{box-shadow:0 0 12px var(--green-glow)}.ctrl-slider::-moz-range-thumb{background:var(--green);cursor:pointer;border:none;border-radius:50%;width:10px;height:10px}.ctrl-num{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);width:54px;color:var(--text);font-family:var(--font);text-align:right;outline:none;flex-shrink:0;padding:2px 5px;transition:border-color .1s}.ctrl-num:focus{border-color:var(--focus-ring)}.ctrl-section--fill{flex:1;min-height:0}.info-text{font-size:var(--fs-sm);color:var(--text-dim);font-weight:300;line-height:1.7}.info-text+.info-text{margin-top:8px}.txt-green{color:var(--green)}.txt-amber{color:var(--amber)}.txt-mid{color:var(--text-mid)}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border-hi);border-radius:2px}