:root{--text:#1d1d1f;--text-secondary:#424245;--bg:#fff;--bg-secondary:#f5f5f7;--border:rgba(0,0,0,.1);--accent-blue:#007aff;--accent-green:#34c759;--accent-orange:#ff9500;--accent-purple:#af52de;--accent-red:#ff3b30;--font-display:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--font-text:"SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--font-mono:"SF Mono",Monaco,"Cascadia Code","Segoe UI Mono","Roboto Mono",monospace;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--space-3xl:64px;--space-4xl:80px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--transition:all 0.3s cubic-bezier(0.25,0.46,0.45,0.94)}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.btn,body{font-family:var(--font-text)}.btn{background:var(--accent-blue);border:none;border-radius:var(--radius-lg);color:#fff;cursor:pointer;display:inline-block;font-size:17px;font-weight:500;padding:var(--space-md) var(--space-lg);text-decoration:none;transition:var(--transition)}.btn:hover{background:#0056d6;transform:translateY(-1px)}#playground-app{border:1px solid var(--border);border-left:4px solid #1d1d1f;margin:var(--space-lg) 0;transition:var(--transition)}#playground-app>*{padding:var(--space-lg)}.control-group{display:flex;flex-wrap:wrap;gap:var(--space-lg);margin-bottom:var(--space-lg)}.control-group label{display:flex;flex-direction:column;font-weight:500;gap:var(--space-sm);min-width:180px}.control-group label,.control-group select{color:var(--text);font-family:var(--font-text);font-size:15px}.control-group select{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-md);cursor:pointer;padding:var(--space-md);transition:var(--transition)}.control-group select:hover{border-color:rgba(0,0,0,.2)}.control-group select:focus{border-color:#1d1d1f;outline:none}.playground-output{display:flex;flex-direction:column;gap:var(--space-xl)}#copy-css{border-radius:var(--radius-sm);font-family:var(--font-text);margin-top:var(--space-sm);padding:var(--space-sm) var(--space-md);transition:var(--transition)}#copy-css:hover{background:#424245}#flex-demo{align-items:center!important;display:flex!important;gap:var(--space-md)!important;justify-content:center!important}@media (max-width:768px){main{padding:var(--space-2xl) var(--space-md)}header{padding:var(--space-3xl) var(--space-md) var(--space-2xl)}nav{flex-direction:column;gap:var(--space-sm)}.examples,.property-list{gap:var(--space-md);grid-template-columns:1fr}h2{font-size:1.75rem}.example h3,.property-list h3{font-size:1.25rem}.control-group{flex-direction:column;gap:var(--space-md)}.control-group label{min-width:auto}}header{background:#000;border-bottom:1px solid var(--border);padding:var(--space-4xl) var(--space-lg) var(--space-3xl);text-align:center}header h1{color:#fff;font-family:var(--font-display);font-size:clamp(2.5rem,6vw,4rem);font-weight:700;letter-spacing:-.02em;margin:0 0 var(--space-lg) 0}nav{display:flex;flex-wrap:wrap;gap:var(--space-xl);justify-content:center;margin-top:var(--space-lg)}nav a{border-radius:var(--radius-lg);color:hsla(0,0%,100%,.8);font-family:var(--font-text);font-size:17px;font-weight:500;padding:var(--space-sm) var(--space-md);text-decoration:none;transition:var(--transition)}nav a:hover{background:hsla(0,0%,100%,.1);color:#fff}.layout-container{display:flex;gap:var(--space-2xl);margin:0 auto;max-width:1400px}.table-of-contents{flex-shrink:0;height:fit-content;padding:var(--space-xl) 0;position:sticky;top:var(--space-xl);width:280px}.toc-nav{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:hsla(0,0%,100%,.8);border:1px solid hsla(0,0%,100%,.3);border-radius:var(--radius-xl);box-shadow:0 8px 32px rgba(0,0,0,.1);padding:var(--space-xl);transition:all .3s ease}.toc-nav:hover{background:hsla(0,0%,100%,.9);box-shadow:0 12px 40px rgba(0,0,0,.15);transform:translateY(-2px)}.toc-nav h3{backdrop-filter:blur(10px);border-bottom:1px solid rgba(0,0,0,.1);color:var(--text);font-family:var(--font-display);font-size:18px;font-weight:700;margin:0 0 var(--space-lg) 0;padding-bottom:var(--space-md)}.toc-nav ul{list-style:none;margin:0;padding:0}.toc-nav>ul>li{margin-bottom:var(--space-md)}.toc-nav ul ul{margin-left:var(--space-md);margin-top:var(--space-sm)}.toc-nav ul ul li{margin-bottom:var(--space-sm)}.toc-nav a{border-radius:var(--radius-md);color:var(--text-secondary);display:block;font-family:var(--font-text);font-size:15px;font-weight:500;padding:var(--space-sm) var(--space-md);position:relative;text-decoration:none;transition:var(--transition)}.toc-nav a:hover{backdrop-filter:blur(10px);background:rgba(0,122,255,.15);color:var(--text);transform:translateX(4px)}.toc-nav>ul>li>a{color:var(--text);font-weight:600}.toc-nav ul ul a{color:var(--text-secondary);font-size:14px}main{flex:1;min-width:0;padding:var(--space-3xl) var(--space-lg)}section{margin-bottom:var(--space-4xl)}h2{color:var(--text);font-family:var(--font-display);font-size:2rem;font-weight:600;letter-spacing:-.01em;margin:0 0 var(--space-xl) 0}p{color:var(--text-secondary);font-family:var(--font-text);font-size:17px;line-height:1.6;margin-bottom:var(--space-lg)}.examples,.property-list{display:flex;flex-direction:column;gap:var(--space-lg);margin-top:var(--space-xl)}.examples>.example,.examples>article,.property-list>article{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-lg);transition:var(--transition)}.examples>.example:hover,.examples>article:hover,.property-list>article:hover{box-shadow:0 8px 25px rgba(0,0,0,.08);transform:translateY(-4px)}#container .property-list>article{border-left:4px solid #1d1d1f}#container .property-list>article h3{color:#1d1d1f}#item .property-list>article{border-left:4px solid #1d1d1f}#item .property-list>article h3{color:#1d1d1f}#examples .examples>.example{border-left:4px solid #1d1d1f}#examples .examples>.example h3{color:#1d1d1f}.example h3,.property-list h3{font-family:var(--font-display);font-size:1.375rem;font-weight:600;letter-spacing:-.01em;margin:0 0 var(--space-md) 0}.example p,.property-list article p{color:var(--text-secondary);font-family:var(--font-text);font-size:15px;line-height:1.5;margin:var(--space-md) 0}code,pre{font-family:var(--font-mono);font-size:14px}pre{border:1px solid var(--border);border-radius:var(--radius-md);line-height:1.5;margin:var(--space-lg) 0;overflow-x:auto;padding:var(--space-lg)}code,pre{background:var(--bg-secondary)}code{border-radius:4px;font-size:13px;font-weight:500;padding:2px 6px}pre code{background:none;font-size:14px;font-weight:400;padding:0}.demo{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg);gap:var(--space-md);margin:var(--space-lg) 0;min-height:120px;padding:var(--space-xl)}.demo,.demo>div{align-items:center;display:flex;justify-content:center}.demo>div{border-radius:var(--radius-md);color:#fff;font-family:var(--font-display);font-size:14px;font-weight:600;height:60px;transition:var(--transition);width:60px}#container .demo>div,#examples .demo>div,#item .demo>div,.demo>div{background:#1d1d1f}.demo:hover>div{background:#424245;transform:scale(1.05)}#flex-demo{background:var(--bg-secondary)!important;border:1px solid var(--border)!important;border-radius:var(--radius-lg)!important;margin:var(--space-lg) 0!important;min-height:120px!important;padding:var(--space-xl)!important}#resources ul{display:flex;flex-direction:column;gap:var(--space-lg);list-style:none;margin:var(--space-xl) 0;padding:0}#resources li{background:var(--bg);border:1px solid var(--border);border-left:4px solid #1d1d1f;border-radius:var(--radius-lg);padding:var(--space-lg);transition:var(--transition)}#resources li:hover{box-shadow:0 8px 25px rgba(0,0,0,.08);transform:translateY(-2px)}#resources a{color:var(--text);display:block;font-family:var(--font-text);font-size:17px;font-weight:600;margin-bottom:var(--space-sm);text-decoration:none;transition:var(--transition)}#resources a:hover{color:#1d1d1f}#resources a:after{color:var(--text-secondary);content:" ↗";font-size:14px;margin-left:var(--space-sm)}#resources p{color:var(--text-secondary);font-family:var(--font-text);font-size:15px;line-height:1.5;margin:0}.legal-page{margin:0 auto;max-width:800px;padding:var(--space-3xl) var(--space-lg)}.legal-content{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);line-height:1.7;padding:var(--space-2xl)}.legal-content .effective-date{background:var(--bg-secondary);border-left:4px solid #1d1d1f;border-radius:var(--radius-md);font-size:15px;margin-bottom:var(--space-xl);padding:var(--space-md)}.legal-section{border-bottom:1px solid var(--border);margin-bottom:var(--space-2xl);padding-bottom:var(--space-xl)}.legal-section:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}.legal-section h2{color:var(--text);font-family:var(--font-display);font-size:1.5rem;font-weight:600;letter-spacing:-.01em;margin:0 0 var(--space-lg) 0}.legal-section p{color:var(--text-secondary);font-family:var(--font-text);font-size:16px;line-height:1.6;margin-bottom:var(--space-md)}.legal-section p:last-child{margin-bottom:0}.legal-section ul{margin:var(--space-md) 0;padding-left:var(--space-xl)}.legal-section li{color:var(--text-secondary);font-family:var(--font-text);font-size:16px;line-height:1.6;margin-bottom:var(--space-sm)}.legal-section li:last-child{margin-bottom:0}.legal-section a{border-bottom:1px solid transparent;color:var(--text);font-weight:500;text-decoration:none;transition:var(--transition)}.legal-section a:hover{border-bottom-color:#1d1d1f;color:#1d1d1f}#playground-app{background:var(--bg);border-radius:var(--radius-lg);margin:var(--space-2xl) 0;padding:var(--space-xl)}.playground-controls{display:flex;flex-direction:column;gap:var(--space-lg)}.playground-controls
.css-output{background:var(--bg-secondary);border-radius:var(--radius-lg);padding:var(--space-lg)}.css-output h4{font-size:16px;font-weight:600;margin:0 0 var(--space-md) 0}#copy-css{background:#1d1d1f;border:none;border-radius:var(--radius-md);color:#fff;cursor:pointer;font-size:14px;font-weight:500;padding:var(--space-sm) var(--space-lg)}footer{border-top:1px solid var(--border);color:var(--text-secondary);font-family:var(--font-text);font-size:15px;margin-top:var(--space-4xl);padding:var(--space-2xl) var(--space-lg);text-align:center}footer p{margin:0 0 var(--space-sm) 0}footer p:last-child{margin-bottom:0}footer a{color:var(--text);font-weight:500;text-decoration:none;transition:var(--transition)}footer a:hover{color:#1d1d1f;text-decoration:underline}@media (max-width:1024px){.layout-container{flex-direction:column}.table-of-contents{order:-1;position:static;width:100%}.toc-nav{margin-bottom:var(--space-xl)}main{padding:var(--space-2xl) var(--space-lg)}}@media (max-width:768px){.layout-container{gap:var(--space-lg);padding:0 var(--space-md)}main{padding:var(--space-2xl) var(--space-md)}header{padding:var(--space-3xl) var(--space-md) var(--space-2xl)}nav{flex-direction:column;gap:var(--space-sm)}h2{font-size:1.75rem}.example h3,.property-list h3{font-size:1.25rem}.table-of-contents{padding:var(--space-lg) 0}.toc-nav{padding:var(--space-lg)}}