*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#fff;color:#333}.app{display:flex;flex-direction:column;height:100%}.nav{display:flex;align-items:center;justify-content:space-between;padding:1rem 2rem;background:#fff;border-bottom:1px solid #ddd}.nav h1{font-size:1.25rem;font-weight:600}.nav-buttons{display:flex;gap:.5rem}.nav-buttons button{padding:.5rem 1rem;border:1px solid #ddd;border-radius:4px;background:#fff;cursor:pointer}.nav-buttons button:hover{background:#f5f5f5}.nav-buttons button.active{background:#333;border-color:#333;color:#fff}.nav-buttons .label-short{display:none}@media(max-width:768px){.nav{flex-direction:column;gap:.75rem;padding:.75rem 1rem}.nav-buttons{flex-wrap:wrap;justify-content:center}.nav-buttons button{padding:.4rem .75rem;font-size:.875rem}.nav-buttons .label-short{display:inline}.nav-buttons .label-full{display:none}}.main{flex:1;overflow:hidden}.split-pane-divider{background:#ddd;position:relative}.split-pane-divider:before{content:"";position:absolute;background:transparent}.split-pane-divider:hover:before,.split-pane-divider.dragging:before{background:#00000014}.split-pane-divider:focus{outline:2px solid #0066cc;outline-offset:-1px}.split-pane-divider.horizontal{width:1px;cursor:col-resize}.split-pane-divider.horizontal:before{top:0;bottom:0;left:-4px;right:-4px}.split-pane-divider.vertical{height:1px;cursor:row-resize}.split-pane-divider.vertical:before{left:0;right:0;top:-4px;bottom:-4px}.example-container{height:100%;display:flex;flex-direction:column}.example-header{padding:1rem;border-bottom:1px solid #ddd}.example-header h2{font-size:1rem;margin-bottom:.25rem}.example-header p{font-size:.875rem;color:#666}.example-content{flex:1;min-height:0}.pane{height:100%;padding:1rem;display:flex;flex-direction:column}.pane h3{font-size:.875rem;margin-bottom:.5rem;color:#333}.pane p{font-size:.875rem;color:#666}.pane.gray{background:#f5f5f5}.code{background:#f5f5f5;border-radius:4px;padding:1rem;font-family:monospace;font-size:.8rem;overflow:auto;margin-top:.5rem}.code code{white-space:pre;display:block}.styled-pane,.styled-pane h3{color:#fff}.styled-pane.purple{background:linear-gradient(135deg,#667eea,#764ba2)}.styled-pane.pink{background:linear-gradient(135deg,#f093fb,#f5576c)}.styled-pane.blue{background:linear-gradient(135deg,#4facfe,#00f2fe)}.code.dark{background:#0003}.code.dark code{color:#fff}.custom-divider{background:linear-gradient(to bottom,#e94560,#0f3460);display:flex;align-items:center;justify-content:center;cursor:col-resize;transition:opacity .15s}.custom-divider:hover,.custom-divider.dragging{opacity:.8}.custom-divider.horizontal{width:8px}.custom-divider.vertical{height:8px;cursor:row-resize}.custom-divider:after{content:"···";color:#fffc;font-size:10px;letter-spacing:1px;writing-mode:vertical-rl}.custom-divider.vertical:after{writing-mode:horizontal-tb}.snap-list{list-style:none;margin-top:.5rem}.snap-list li{padding:.25rem .5rem;font-family:monospace;font-size:.8rem;border-left:2px solid #ddd;margin-bottom:.25rem}.snap-list li.active{border-color:#06c;background:#f0f7ff}.size-display{font-family:monospace;font-size:.8rem;color:#666;margin-top:.5rem}.btn{padding:.25rem .5rem;background:#333;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:.8rem}.btn:hover{background:#555}