.overflow-container{display:flex;position:relative;overflow:hidden}.overflow-container__inner{display:flex;position:relative;overflow:auto;width:100%}.overflow-container__inner--hide-scrollbar-x::-webkit-scrollbar:horizontal{display:none;height:0}.overflow-container__inner--hide-scrollbar-y::-webkit-scrollbar:vertical{display:none;width:0}.overflow-container__inner--hide-scrollbar-x,.overflow-container__inner--hide-scrollbar-y{scrollbar-width:none;-ms-overflow-style:none}.overflow-container__indicators{position:absolute;left:0;top:0;display:flex;width:100%;height:100%;z-index:50;background:transparent;pointer-events:none}.overflow-container__indicator{position:absolute;z-index:50;cursor:pointer;pointer-events:auto}.overflow-container__indicator--left{left:0;top:0;width:16px;height:100%;background:linear-gradient(to left,transparent,rgba(0,0,0,.1))}.overflow-container__indicator--right{right:0;top:0;width:16px;height:100%;background:linear-gradient(to right,transparent,rgba(0,0,0,.1))}.overflow-container__indicator--up{left:0;top:0;width:100%;height:20px;background:linear-gradient(to top,transparent,rgba(0,0,0,.1))}.overflow-container__indicator--down{left:0;bottom:0;width:100%;height:20px;background:linear-gradient(to bottom,transparent,rgba(0,0,0,.1))}*{box-sizing:border-box;margin:0;padding:0}body{font-family:system-ui,-apple-system,sans-serif;line-height:1.6;color:#333;min-width:0}header{background:#000;color:#eee;padding:clamp(.75rem,4vw,1rem) clamp(1rem,5vw,2rem);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem}header h1{font-size:clamp(1.125rem,4vw,1.5rem);word-break:break-word}header a{color:#eee;text-decoration:none;font-size:.9rem}header a:hover{text-decoration:underline}nav a{color:#eee;margin-left:1rem;text-decoration:none}nav a:hover{text-decoration:underline}main{width:100%;max-width:720px;margin:0 auto;padding:clamp(1.25rem,5vw,3rem) clamp(1rem,4vw,2rem)}section{margin-bottom:clamp(1.5rem,5vw,3rem);padding-bottom:clamp(1rem,4vw,2rem);border-bottom:1px solid #eee}section:last-of-type{border-bottom:none}h2{margin-bottom:.75rem;font-size:clamp(1.1rem,3vw,1.35rem);color:#1a1a2e}.example-number{margin-right:.25rem}.overflow-demo{border:1px solid #e5e7eb;border-radius:8px;overflow:hidden;max-width:100%}.overflow-demo--horizontal,.overflow-demo--custom{min-height:100px}.overflow-demo--vertical{min-height:160px}.overflow-demo--both{min-height:180px}.overflow-container__indicator.custom-indicators.overflow-container__indicator--left{width:24px;background:linear-gradient(to left,transparent,rgba(139,92,246,.35))}.overflow-container__indicator.custom-indicators.overflow-container__indicator--right{width:24px;background:linear-gradient(to right,transparent,rgba(139,92,246,.35))}.overflow-container__indicator.custom-indicators.overflow-container__indicator--top,.overflow-container__indicator.custom-indicators.overflow-container__indicator--up{height:24px;background:linear-gradient(to top,transparent,rgba(139,92,246,.35))}.overflow-container__indicator.custom-indicators.overflow-container__indicator--bottom,.overflow-container__indicator.custom-indicators.overflow-container__indicator--down{height:24px;background:linear-gradient(to bottom,transparent,rgba(139,92,246,.35))}.overflow-container__indicator.code-block-indicators.overflow-container__indicator--left{background:linear-gradient(to left,transparent,rgba(255,255,255,.25))}.overflow-container__indicator.code-block-indicators.overflow-container__indicator--right{background:linear-gradient(to right,transparent,rgba(255,255,255,.25))}.overflow-container__indicator.code-block-indicators.overflow-container__indicator--up{background:linear-gradient(to top,transparent,rgba(255,255,255,.25))}.overflow-container__indicator.code-block-indicators.overflow-container__indicator--down{background:linear-gradient(to bottom,transparent,rgba(255,255,255,.25))}.example-section{margin-bottom:clamp(1.5rem,5vw,3rem)}.example-description{margin-bottom:1rem;font-size:clamp(.875rem,2vw,1rem);color:#666}.example-description code{padding:.1em .35em;font-family:ui-monospace,Cascadia Code,Source Code Pro,Menlo,monospace;font-size:.8125rem;font-weight:700;color:inherit;background:#e5e7eb;border-radius:4px}.example-demo,.example-code-wrap{margin-bottom:1.5rem;width:100%}.example-code-wrapper{position:relative}.example-code-copy{position:absolute;top:.5rem;right:.5rem;z-index:10;padding:.35rem .6rem;font-size:.75rem;font-weight:500;color:#9ca3af;background:#ffffff14;border:1px solid rgba(255,255,255,.15);border-radius:6px;cursor:pointer;transition:color .15s,background .15s,border-color .15s}.example-code-copy:hover{color:#e5e7eb;background:#ffffff1f;border-color:#ffffff40}.example-label{display:block;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:#9ca3af;margin-bottom:.5rem}.example-code-wrapper .overflow-container__inner{border-radius:8px}.example-code{margin:0;width:100%;min-width:min-content;padding:clamp(.75rem,3vw,1rem) clamp(.75rem,3vw,1.25rem);padding-top:2.25rem;background:#1e1e1e;color:#d4d4d4;font-size:clamp(.7rem,1.5vw,.8125rem);line-height:1.5;box-sizing:border-box}.example-code code{font-family:ui-monospace,Cascadia Code,Source Code Pro,Menlo,monospace;white-space:pre}footer{text-align:center;padding:clamp(1rem,4vw,1.5rem);background:#f5f5f5;color:#666;font-size:clamp(.8125rem,2vw,.9rem)}@media(max-width:480px){nav a{margin-left:.75rem}.example-demo,.example-code-wrap{margin-bottom:1.25rem}.example-label{font-size:.7rem}}body{background-color:#fff;opacity:1;background-image:radial-gradient(#ddd .5px,#fff .5px);background-size:10px 10px}