:root{--bg-main:#fff;--bg-canvas:#f9fafb;--bg-sidebar:#fff;--bg-input:#fff;--bg-select:#fff;--bg-hover:#f3f4f6;--bg-active:#111827;--text-main:#111827;--text-muted:#6b7280;--text-active:#fff;--border-color:#e5e7eb;--border-focus:#111827;--accent:#343a40;--font-sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono:"Fira Code", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background-color:var(--bg-main);color:var(--text-main);min-height:100vh;overflow:hidden auto}.app-container{flex-direction:column;width:100%;min-height:100vh;display:flex}.app-header{border-bottom:1px solid var(--border-color);background-color:var(--bg-sidebar);justify-content:space-between;align-items:center;height:56px;padding:0 1.5rem;display:flex}.app-footer{border-top:1px solid var(--border-color);background-color:var(--bg-sidebar);height:36px;color:var(--text-muted);justify-content:space-between;align-items:center;padding:0 1.5rem;font-size:.75rem;display:flex}.brand-section{align-items:center;gap:.75rem;display:flex}.brand-title{letter-spacing:-.025em;color:var(--text-main);font-size:1.125rem;font-weight:700}.brand-badge{font-family:var(--font-mono);background-color:var(--bg-hover);color:var(--text-muted);border:1px solid var(--border-color);border-radius:4px;padding:.125rem .375rem;font-size:.75rem;font-weight:500}.header-actions{align-items:center;gap:.75rem;display:flex}.app-workspace{flex-shrink:0;width:100%;height:calc(100vh - 56px);display:flex;overflow:hidden}.sidebar-left{border-right:1px solid var(--border-color);background-color:var(--bg-sidebar);flex-direction:column;gap:1.5rem;width:360px;min-width:360px;padding:1.5rem;display:flex;overflow-y:auto}.sidebar-right{border-left:1px solid var(--border-color);background-color:var(--bg-sidebar);flex-direction:column;gap:1.5rem;width:400px;min-width:400px;padding:1.5rem;display:flex;overflow-y:auto}.canvas-center{background-color:var(--bg-canvas);background-image:radial-gradient(#0000001f 1px,#0000 1px);background-size:20px 20px;flex:1;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.preview-element{background-color:var(--accent);width:320px;height:320px;position:relative}.visual-corner-selector-wrapper{flex-direction:column;gap:.625rem;display:flex}.selector-header{justify-content:space-between;align-items:center;display:flex}.selector-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;font-size:.8125rem;font-weight:600}.btn-sync-all{background:var(--bg-main);border:1px solid var(--border-color);color:var(--text-muted);cursor:pointer;border-radius:4px;align-items:center;gap:.35rem;padding:.25rem .5rem;font-size:.75rem;font-weight:600;transition:all .15s;display:inline-flex}.btn-sync-all:hover:not(:disabled){border-color:var(--text-main);color:var(--text-main)}.btn-sync-all.active{background-color:var(--accent);border-color:var(--accent);color:var(--text-active);box-shadow:0 1px 3px #0000001a}.btn-sync-all.active:hover:not(:disabled){color:var(--text-active);background-color:#374151;border-color:#374151}.btn-sync-all:disabled,.btn-sync-all.disabled{opacity:.4;cursor:not-allowed;border-color:var(--border-color);color:var(--text-muted);background-color:var(--bg-hover);box-shadow:none}.visual-corner-selector-container{width:100%;position:relative}.visual-corner-selector{aspect-ratio:1;border:1px solid var(--border-color);background-color:var(--bg-hover);border-radius:8px;grid-template-columns:repeat(2,1fr);gap:.75rem;width:100%;padding:.75rem;transition:border-color .2s,background-color .2s;display:grid}.visual-corner-selector-container.synced-mode .visual-corner-selector{border-color:var(--accent);background-color:#343a4008}.sync-status-indicator{color:var(--text-muted);background-color:var(--bg-hover);border:1px solid var(--border-color);border-radius:4px;align-items:center;gap:.375rem;padding:.375rem .625rem;font-size:.75rem;line-height:1.3;display:flex}.corner-select-btn{aspect-ratio:1;border:1px dashed var(--border-color);background-color:var(--bg-main);cursor:pointer;color:var(--text-muted);border-radius:6px;flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:.625rem;font-size:.8125rem;font-weight:600;transition:border-color .15s,color .15s,background-color .15s,opacity .15s,box-shadow .15s;display:flex;position:relative;box-shadow:0 1px 2px #00000005}.corner-select-btn.enabled{border:1px solid var(--border-color);background-color:var(--bg-main);color:var(--text-main)}.corner-select-btn.disabled{opacity:.65;background-color:#fff9;border-color:#00000014}.corner-select-btn:hover{border-color:var(--text-main);color:var(--text-main);opacity:1}.corner-select-btn.active{border:2px solid var(--accent);background-color:var(--bg-main);color:var(--text-main);opacity:1;box-shadow:0 4px 12px #0000000f}.corner-select-btn.synced.enabled{border-color:#343a4059}.toggle-switch-mini{width:28px;height:16px;position:absolute;bottom:.5rem;right:.5rem}.toggle-switch-mini input{opacity:0;width:0;height:0}.slider-mini{cursor:pointer;background-color:#d1d5db;border-radius:16px;transition:background-color .1s;position:absolute;inset:0}.slider-mini:before{content:"";background-color:#fff;border-radius:50%;width:10px;height:10px;transition:transform .1s;position:absolute;bottom:3px;left:3px}input:checked+.slider-mini{background-color:var(--accent)}input:checked+.slider-mini:before{transform:translate(12px)}.control-group{flex-direction:column;gap:.5rem;margin-bottom:1.25rem;display:flex}.control-header{justify-content:space-between;align-items:center;display:flex}.control-label{color:var(--text-main);font-size:.875rem;font-weight:500}.toggle-switch{width:36px;height:20px;display:inline-block;position:relative}.toggle-switch input{opacity:0;width:0;height:0}.slider{cursor:pointer;background-color:#e5e7eb;border-radius:20px;position:absolute;inset:0}.slider:before{content:"";background-color:#fff;border-radius:50%;width:14px;height:14px;position:absolute;bottom:3px;left:3px}input:checked+.slider{background-color:var(--accent)}input:checked+.slider:before{transform:translate(16px)}input[type=range]{appearance:none;background-color:#e5e7eb;border-radius:2px;outline:none;width:100%;height:4px;margin:.5rem 0}input[type=range]::-webkit-slider-thumb{appearance:none;background-color:var(--accent);cursor:pointer;border:1px solid var(--accent);border-radius:50%;width:14px;height:14px}.range-values{color:var(--text-muted);justify-content:space-between;font-size:.75rem;display:flex}.select-wrapper{position:relative}select{border:1px solid var(--border-color);background-color:var(--bg-select);width:100%;color:var(--text-main);cursor:pointer;appearance:none;border-radius:6px;outline:none;padding:.5rem 2rem .5rem .75rem;font-size:.875rem}select:focus{border-color:var(--border-focus)}.select-wrapper:after{content:"↓";pointer-events:none;color:var(--text-muted);font-size:.75rem;position:absolute;top:50%;right:.75rem;transform:translateY(-50%)}.gear-btn{border:1px solid var(--border-color);cursor:pointer;color:var(--text-muted);background:0 0;border-radius:4px;justify-content:center;align-items:center;padding:3px 5px;transition:border-color .1s,color .1s,background-color .1s;display:inline-flex}.gear-btn:hover{border-color:var(--text-main);color:var(--text-main)}.gear-btn.active{border-color:var(--accent);color:var(--accent);background-color:var(--bg-canvas)}.advanced-panel{border:1px solid var(--border-color);border-top:2px solid var(--accent);background-color:var(--bg-canvas);border-radius:6px;margin-bottom:1.25rem;padding:.75rem}.advanced-panel-header{text-transform:uppercase;letter-spacing:.07em;color:var(--text-muted);margin-bottom:.75rem;font-size:.6875rem;font-weight:700}.code-output{flex-direction:column;gap:.75rem;display:flex}.code-header{justify-content:space-between;align-items:center;display:flex}.code-block{background-color:var(--bg-canvas);font-family:var(--font-mono);color:var(--text-main);white-space:pre-wrap;word-break:break-all;border:1px solid var(--border-color);border-radius:6px;max-height:350px;padding:1rem;font-size:.8125rem;line-height:1.5;overflow:auto}.btn-reset{border:1px solid var(--border-color);color:var(--text-muted);cursor:pointer;background-color:#0000;border-radius:4px;align-items:center;gap:.375rem;padding:.375rem .75rem;font-size:.8125rem;font-weight:500;display:inline-flex}.btn-reset:hover{border-color:var(--text-main);color:var(--text-main)}.copy-btn{background-color:var(--accent);border:1px solid var(--accent);color:var(--text-active);cursor:pointer;border-radius:6px;justify-content:center;align-items:center;gap:.5rem;width:100%;padding:.5rem 1rem;font-size:.875rem;font-weight:500;display:inline-flex}.copy-btn:hover{background-color:#374151;border-color:#374151}.copy-btn.copied{background-color:#10b981;border-color:#10b981}.export-svg-btn{border:1px solid var(--border-color);color:var(--text-main);cursor:pointer;background-color:#0000;border-radius:6px;justify-content:center;align-items:center;gap:.5rem;width:100%;padding:.5rem 1rem;font-size:.875rem;font-weight:500;transition:border-color .15s,background-color .15s;display:inline-flex}.export-svg-btn:hover{border-color:var(--accent);background-color:var(--bg-hover)}.figma-btn.copied{color:#10b981;background-color:#ecfdf5;border-color:#10b981}.summary-table-wrapper{flex-direction:column;gap:.5rem;display:flex}.summary-table{border-collapse:collapse;width:100%;font-size:.8125rem}.summary-table th,.summary-table td{border-bottom:1px solid var(--border-color);text-align:left;padding:.5rem .25rem}.summary-table th{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;font-size:.75rem;font-weight:600}.summary-table td{color:var(--text-main)}.summary-table tr:last-child td{border-bottom:none}.corner-indicator{background-color:var(--border-color);border-radius:50%;width:8px;height:8px;margin-right:.5rem;display:inline-block}.corner-indicator.active{background-color:var(--accent)}@media (width<=1024px){body{overflow:auto}.app-container{width:100%;height:auto}.app-workspace{flex-direction:column;height:auto;overflow:visible}.sidebar-left,.sidebar-right{border-left:none!important;border-right:none!important;width:100%!important;min-width:0!important;height:auto!important;overflow-y:visible!important}.sidebar-left{border-bottom:1px solid var(--border-color)}.sidebar-right{border-top:1px solid var(--border-color)}.canvas-center{border-right:none;border-bottom:1px solid var(--border-color);height:400px}}.landing-content{width:100%;max-width:768px;color:var(--text-main);margin:0 auto;padding:4rem 1.5rem 5rem;line-height:1.6}.landing-content h1{letter-spacing:-.02em;margin-bottom:1.5rem;font-size:1.75rem;font-weight:700}.landing-content h2{letter-spacing:-.01em;margin-top:2.25rem;margin-bottom:.75rem;font-size:1.25rem;font-weight:600}.landing-content p{margin-bottom:1rem}.landing-content ul,.landing-content ol{margin-bottom:1.25rem;padding-left:1.25rem}.landing-content li{margin-bottom:.5rem}