*{margin:0;padding:0;box-sizing:border-box}:root{--primary: #A855F7;--primary-light: #C084FC;--primary-dark: #9333EA;--secondary: #34D399;--secondary-light: #6EE7B7;--accent: #F59E0B;--bg-dark: #000000;--bg-darker: #0A0A0A;--bg-card: rgba(255, 255, 255, .05);--bg-glass: rgba(255, 255, 255, .08);--text-primary: #FFFFFF;--text-secondary: #A1A1AA;--text-muted: #71717A;--border: rgba(255, 255, 255, .1);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .3);--shadow-md: 0 8px 24px rgba(0, 0, 0, .4);--shadow-lg: 0 16px 48px rgba(0, 0, 0, .5);--shadow-glow: 0 0 20px rgba(168, 85, 247, .4);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px}html{font-size:16px}@media(max-width:768px){html{font-size:14px}}@media(max-width:480px){html{font-size:13px}}body{margin:0;min-height:100vh;background:var(--bg-dark);color:var(--text-primary);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background .3s,color .3s}body:not(.light-mode){background-image:radial-gradient(at 0% 0%,rgba(168,85,247,.15) 0px,transparent 50%),radial-gradient(at 100% 100%,rgba(52,211,153,.15) 0px,transparent 50%)}body.light-mode{background:#fff;background-image:radial-gradient(at 0% 0%,rgba(168,85,247,.03) 0px,transparent 50%),radial-gradient(at 100% 100%,rgba(52,211,153,.03) 0px,transparent 50%)}#root{width:100%;min-height:100vh}::-webkit-scrollbar{width:8px;height:8px}@media(max-width:768px){::-webkit-scrollbar{width:4px;height:4px}}::-webkit-scrollbar-track{background:var(--bg-darker)}::-webkit-scrollbar-thumb{background:var(--primary);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--primary-light)}.glass{background:var(--bg-glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border);box-shadow:var(--shadow-md)}*{transition:all .2s cubic-bezier(.34,1.56,.64,1)}button{transition:all .15s cubic-bezier(.34,1.56,.64,1);touch-action:manipulation;-webkit-tap-highlight-color:transparent}::selection{background:var(--primary);color:#fff}input,select,textarea{font-size:16px!important}@media(max-width:768px){button,a,input,select{min-height:44px}}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:768px){h1{font-size:2rem!important}h2{font-size:1.5rem!important}h3{font-size:1.25rem!important}}body,#root{overflow-x:hidden;max-width:100vw}.app{display:flex;min-height:100vh;width:100%}.app.light .typography-preview,.app.light .typography-preview div,.app.light .type-sample,.app.light .weight-preview,.app.light .line-height-preview,.app.light .letter-spacing-preview{color:var(--text-primary)!important}.app.light .preview-card{background:#00000008;color:var(--text-primary)}.app.light .preview-card h4,.app.light .preview-card p,.app.light .preview-card strong,.app.light .alert{color:var(--text-primary)}.app.light .alert strong{color:var(--text-primary);font-weight:700}.app.light .component-preview{color:var(--text-primary)}.app.light .preview-grid *{color:inherit}.app.light .preview-button{color:#fff}.app.light .preview-button.secondary{color:var(--primary)!important}.app.light{--bg-dark: #FFFFFF;--bg-darker: #F9FAFB;--bg-card: rgba(0, 0, 0, .03);--bg-glass: rgba(0, 0, 0, .05);--text-primary: #111827;--text-secondary: #6B7280;--text-muted: #9CA3AF;--border: rgba(0, 0, 0, .1);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .1);--shadow-md: 0 8px 24px rgba(0, 0, 0, .12);--shadow-lg: 0 16px 48px rgba(0, 0, 0, .15)}.app.light .sidebar{background:#fffffffa;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.app.light .ai-input,.app.light .token-input,.app.light .color-hex-input,.app.light .preview-input,.app.light .color-section-name{color:var(--text-primary);background:var(--bg-card)}.app.light .ai-input::placeholder{color:var(--text-muted)}.app.light .export-code{background:#f9fafb;border-color:var(--border)}.app.light .export-code code{color:#059669}.app.light .glass{background:#fff9;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-color:#00000014}.app.light .nav-item:hover{background:#0000000d}.app.light .nav-item.active{background:#a855f71a;border-left-color:var(--primary)}.app.light .btn-secondary{background:#0000000d;color:var(--text-primary);border-color:#0000001a}.app.light .btn-secondary:hover{background:#00000014;border-color:var(--primary)}.app.light .btn-icon{color:var(--text-secondary);border-color:#0000001a}.app.light .btn-icon:hover{background:#0000000d;color:var(--text-primary)}.app.light .import-button,.app.light .theme-toggle{background:#0000000d;border-color:#0000001a}.app.light .import-button:hover,.app.light .theme-toggle:hover{background:#00000014}.app.light .shade-overlay{background:#ffffffe6}.app.light .shade-name,.app.light .shade-hex{color:#111827}.app.light .token-display,.app.light .type-scale-item,.app.light .spacing-scale-item,.app.light .weight-item,.app.light .line-height-item,.app.light .letter-spacing-item,.app.light .contrast-item,.app.light .border-width-item{background:#00000008;border-color:#00000014}.app.light .export-format-btn{background:#00000008;border-color:#0000001a}.app.light .export-format-btn:hover{background:#0000000d}.app.light .export-format-btn.active{background:var(--primary);color:#fff}.app.light .color-section{background:#00000005;border-color:#00000014}.app.light .shadow-item{background:#fff9}.app.light .radius-preview{background:#0000000d}.app.light .border-width-preview{background:#00000005}.app.light .preview-card{background:#00000008}.app.light .alert{color:var(--text-primary)}.app.light .color-picker-small{border-color:#00000026}.app.light .shade-card{border-color:#0000001a}.app.light .breakpoint-item{background:#00000008}.app.light .breakpoint-name{color:var(--primary)}.app.light .breakpoint-value{color:var(--text-primary)}.app.light .breakpoint-description{color:var(--text-secondary)}.app.light h1,.app.light h2,.app.light h3,.app.light h4,.app.light h5,.app.light h6{color:var(--text-primary)}.app.light p,.app.light span,.app.light div{color:inherit}.app.light .card-title,.app.light .view-title,.app.light .section-title,.app.light .subsection-title,.app.light .type-name,.app.light .spacing-name,.app.light .weight-name,.app.light .line-height-name,.app.light .letter-spacing-name,.app.light .radius-name,.app.light .border-width-name,.app.light .opacity-name,.app.light .token-display-name,.app.light .shadow-name{color:var(--text-primary)}.app.light .type-size,.app.light .spacing-size,.app.light .weight-value,.app.light .line-height-value,.app.light .letter-spacing-value,.app.light .radius-value,.app.light .border-width-value,.app.light .opacity-value,.app.light .token-display-value,.app.light .shadow-value{color:var(--text-secondary)}.app.light .type-sample,.app.light .weight-preview,.app.light .line-height-preview,.app.light .letter-spacing-preview,.app.light .export-info h4,.app.light .export-info p{color:var(--text-primary)}.app.light .export-info p{color:var(--text-secondary)}.app.light .card-header h3,.app.light .preview-card-header h4,.app.light .preview-card-text{color:var(--text-primary)}.app.light .preview-card-text{color:var(--text-secondary)}.app.light{color:var(--text-primary)}.app.light *{color:inherit}.app.light h1,.app.light h2,.app.light h3,.app.light h4,.app.light h5,.app.light h6,.app.light p,.app.light span,.app.light div,.app.light label{color:var(--text-primary)}.app.light .btn-primary{color:#fff}.app.light .preview-button:not(.secondary){color:#fff}.app.light .badge{color:#fff}.sidebar{width:280px;background:#000000f2;border-right:1px solid var(--border);display:flex;flex-direction:column;padding:32px 24px;flex-shrink:0;position:fixed;left:0;top:0;height:100vh;overflow-y:auto;z-index:100}.sidebar-header{margin-bottom:40px}.logo{font-size:32px;font-weight:800;background:linear-gradient(135deg,var(--primary),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:flex;align-items:center;gap:8px;margin-bottom:8px}.triangle{color:var(--primary);-webkit-text-fill-color:var(--primary);font-size:20px}.tagline{font-size:13px;color:var(--text-secondary);margin-bottom:4px}.tribute{font-size:11px;color:var(--text-muted);font-style:italic}.nav{display:flex;flex-direction:column;gap:4px;flex:1}.nav-item{display:flex;align-items:center;gap:12px;padding:12px 16px;background:transparent;border:none;border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;font-size:14px;font-weight:500;text-align:left;transition:all .2s;position:relative}.nav-item:hover{background:var(--bg-glass);color:var(--text-primary)}.nav-item.active{background:var(--bg-glass);color:var(--text-primary);border-left:3px solid var(--primary);padding-left:13px}.nav-item svg:last-child{margin-left:auto;opacity:0;transition:opacity .2s}.nav-item.active svg:last-child{opacity:1}.sidebar-footer{margin-top:24px;padding-top:24px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:12px}.import-button,.theme-toggle{width:100%;display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--bg-glass);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-primary);cursor:pointer;font-size:14px;font-weight:500;transition:all .2s}.import-button:hover,.theme-toggle:hover{background:var(--bg-card);border-color:var(--primary)}.main-content{flex:1;margin-left:280px;padding:40px;overflow-y:auto;min-height:100vh}.view{max-width:1400px;margin:0 auto}.view-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:32px}.view-title{font-size:36px;font-weight:800;margin-bottom:8px;color:var(--text-primary)}.view-description{font-size:16px;color:var(--text-secondary)}.card{padding:24px;border-radius:var(--radius-lg);margin-bottom:24px}.card-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}.card-header h3{font-size:18px;font-weight:600;margin:0;display:flex;align-items:center;gap:12px}.card-title{font-size:16px;font-weight:600;margin-bottom:16px}.icon-accent{color:var(--accent)}.btn-primary{display:flex;align-items:center;gap:8px;padding:12px 24px;background:var(--primary);color:#fff;border:none;border-radius:var(--radius-md);font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}.btn-primary:hover{background:var(--primary-light);transform:translateY(-1px);box-shadow:0 4px 12px #a855f74d}.btn-secondary{padding:12px 24px;background:var(--bg-glass);color:var(--text-primary);border:1px solid var(--border);border-radius:var(--radius-md);font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}.btn-secondary:hover{background:var(--bg-card);border-color:var(--primary)}.btn-secondary:disabled{opacity:.5;cursor:not-allowed}.btn-icon{padding:8px;background:transparent;color:var(--text-secondary);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.btn-icon:hover{background:var(--bg-glass);color:var(--text-primary);border-color:var(--primary)}.ai-generator{display:flex;gap:12px}.ai-input{flex:1;padding:12px 16px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-primary);font-size:14px;outline:none;transition:all .2s}.ai-input:focus{border-color:var(--primary);background:var(--bg-glass)}.ai-input::placeholder{color:var(--text-muted)}.colors-section{display:flex;flex-direction:column;gap:32px;margin-bottom:24px}.color-section{background:var(--bg-glass);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px}.color-section-header{margin-bottom:20px}.color-section-info{display:flex;justify-content:space-between;align-items:center;gap:16px}.color-section-name{font-size:20px;font-weight:700;background:transparent;border:none;color:var(--text-primary);outline:none;padding:8px;border-radius:var(--radius-sm);transition:background .2s}.color-section-name:hover,.color-section-name:focus{background:var(--bg-card)}.color-controls{display:flex;align-items:center;gap:12px}.color-picker-small{width:48px;height:48px;border-radius:var(--radius-md);border:2px solid var(--border);cursor:pointer;background:transparent}.color-hex-input{padding:12px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-primary);font-size:14px;font-family:Menlo,monospace;outline:none;width:120px}.color-hex-input:focus{border-color:var(--primary)}.shades-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:12px}.shade-card{aspect-ratio:1;border-radius:var(--radius-md);cursor:pointer;position:relative;overflow:hidden;transition:all .2s;border:1px solid var(--border)}.shade-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0009;opacity:0;transition:opacity .2s}.shade-card:hover .shade-overlay{opacity:1}@media(max-width:768px){.shade-overlay{opacity:1;background:#0006}.shade-name{font-size:12px}.shade-hex{font-size:10px}}.shade-name{font-size:14px;font-weight:700;color:#fff;margin-bottom:4px;text-shadow:0 2px 4px rgba(0,0,0,.3)}.shade-hex{font-size:11px;color:#ffffffe6;font-family:Menlo,monospace;text-shadow:0 2px 4px rgba(0,0,0,.3)}.accessibility-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}.contrast-item{padding:12px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md)}.contrast-colors{display:flex;align-items:center;gap:8px;margin-bottom:12px}.contrast-swatch{width:32px;height:32px;border-radius:6px;border:1px solid var(--border)}.contrast-vs{font-size:12px;color:var(--text-muted)}.contrast-info{display:flex;justify-content:space-between;align-items:center}.contrast-ratio{font-size:14px;font-weight:600;color:var(--text-primary)}.contrast-badge{padding:4px 8px;border-radius:4px;font-size:11px;font-weight:700;text-transform:uppercase}.contrast-badge.success{background:#34d39933;color:var(--secondary)}.contrast-badge.warning{background:#f59e0b33;color:var(--accent)}.contrast-badge.error{background:#ef444433;color:#ef4444}.contrast-item{padding:16px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);transition:all .2s}.contrast-item:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.contrast-name{font-size:12px;color:var(--text-muted);margin-bottom:8px;display:block}.token-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}.token-item{display:flex;flex-direction:column;gap:8px}.token-item label{font-size:13px;font-weight:600;color:var(--text-secondary);text-transform:capitalize}.token-input{padding:10px 12px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-size:14px;outline:none}.token-input:focus{border-color:var(--primary)}.token-preview{padding:12px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:16px}.token-display{display:flex;justify-content:space-between;align-items:center;padding:12px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md)}.token-display-name{font-size:13px;font-weight:600;color:var(--text-primary)}.token-display-value{font-size:12px;color:var(--text-muted);font-family:Menlo,monospace}.scale-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px;margin-bottom:32px}.control-group{display:flex;flex-direction:column;gap:8px}.control-group label{font-size:13px;color:var(--text-secondary);font-weight:500}.slider{width:100%;height:6px;border-radius:3px;background:var(--bg-card);outline:none;cursor:pointer;-webkit-appearance:none}.slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--primary);cursor:pointer;box-shadow:0 2px 8px #a855f766}.slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--primary);cursor:pointer;border:none;box-shadow:0 2px 8px #a855f766}.type-scale-preview{display:flex;flex-direction:column;gap:16px}.type-scale-item{padding:16px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md)}.type-sample{color:var(--text-primary);margin-bottom:8px;line-height:1.2}.type-info{display:flex;justify-content:space-between;align-items:center}.type-name{font-size:13px;font-weight:600;color:var(--primary)}.type-size{font-size:12px;color:var(--text-muted)}.weights-grid,.line-height-grid,.letter-spacing-grid{display:flex;flex-direction:column;gap:12px}.weight-item,.line-height-item,.letter-spacing-item{padding:16px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md)}.weight-preview,.line-height-preview,.letter-spacing-preview{font-size:18px;color:var(--text-primary);margin-bottom:8px}.weight-info,.line-height-info,.letter-spacing-info{display:flex;justify-content:space-between;align-items:center;font-size:13px}.weight-name,.line-height-name,.letter-spacing-name{color:var(--text-primary);font-weight:600}.weight-value,.line-height-value,.letter-spacing-value{color:var(--text-muted)}.spacing-scale-preview{display:flex;flex-direction:column;gap:12px}.spacing-scale-item{display:flex;align-items:center;gap:16px;padding:12px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md)}.spacing-visual{height:24px;background:var(--primary);border-radius:4px;transition:all .3s}.spacing-info{display:flex;justify-content:space-between;flex:1;align-items:center}.spacing-name{font-size:13px;font-weight:600;color:var(--text-primary)}.spacing-size{font-size:12px;color:var(--text-muted)}.shadows-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}.shadow-item{padding:24px;border-radius:var(--radius-md);text-align:center;transition:all .2s}.shadow-name{font-size:14px;font-weight:600;color:var(--text-primary);margin-bottom:8px}.shadow-value{font-size:11px;color:var(--text-muted);font-family:Menlo,monospace}.radius-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:16px}.radius-item{text-align:center}.radius-preview{width:100%;aspect-ratio:1;margin-bottom:12px}.radius-info{display:flex;flex-direction:column;gap:4px}.radius-name{font-size:13px;font-weight:600;color:var(--text-primary)}.radius-value{font-size:11px;color:var(--text-muted)}.border-width-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:16px}.border-width-item{text-align:center}.border-width-preview{width:100%;height:80px;border-radius:var(--radius-md);margin-bottom:12px;background:var(--bg-card)}.border-width-info{display:flex;flex-direction:column;gap:4px}.border-width-name{font-size:13px;font-weight:600;color:var(--text-primary)}.border-width-value{font-size:11px;color:var(--text-muted)}.opacity-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:16px}.opacity-item{text-align:center}.opacity-preview{width:100%;aspect-ratio:1;border-radius:var(--radius-md);margin-bottom:8px}.opacity-info{display:flex;flex-direction:column;gap:4px}.opacity-name{font-size:13px;font-weight:600;color:var(--text-primary)}.opacity-value{font-size:11px;color:var(--text-muted)}.transitions-section{display:flex;flex-direction:column;gap:24px}.subsection-title{font-size:16px;font-weight:600;color:var(--text-primary);margin-bottom:12px}.grid-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px;margin-bottom:32px}.grid-preview{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:40px;min-height:400px;position:relative;overflow:hidden}.grid-container{display:grid;height:350px;width:100%;position:relative}.grid-column{background:linear-gradient(135deg,var(--primary),var(--secondary));opacity:.25;border-radius:4px;min-height:100%;transition:all .3s ease;position:relative;overflow:hidden}.grid-column:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#ffffff1a,#fff0)}.grid-column:hover{opacity:.4;transform:translateY(-2px)}@keyframes gridPulse{0%,to{opacity:.25}50%{opacity:.35}}.grid-column:nth-child(odd){animation:gridPulse 2s ease-in-out infinite}.grid-column:nth-child(2n){animation:gridPulse 2s ease-in-out infinite;animation-delay:1s}.app.light .grid-preview{background:#00000005;border-color:#00000014}.app.light .grid-column{opacity:.15}.app.light .grid-column:hover{opacity:.25}.preview-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px}.component-preview{display:flex;flex-direction:column;gap:12px}.preview-button{padding:12px 24px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}.preview-button:hover{transform:translateY(-1px);opacity:.9}.preview-button.secondary{background:transparent!important}.preview-button.small{padding:8px 16px;font-size:13px}.preview-card{padding:20px;background:var(--bg-card);border:2px solid}.preview-card-header h4{font-size:18px;margin-bottom:12px;color:var(--text-primary)}.preview-card-text{color:var(--text-secondary);margin-bottom:16px;line-height:1.5}.preview-input{width:100%;padding:12px;background:var(--bg-card);border:2px solid;color:var(--text-primary);font-size:14px;outline:none}.typography-preview{display:flex;flex-direction:column;gap:16px}.app.light .type-sample,.app.light .weight-preview,.app.light .line-height-preview,.app.light .letter-spacing-preview,.app.light .typography-preview{color:var(--text-primary)}.app.light .typography-preview>div{color:var(--text-primary)!important}.app.light .preview-card-header h4,.app.light .alert,.app.light .alert strong{color:var(--text-primary)}.alert{margin-bottom:12px;font-size:14px;color:var(--text-primary)}.badge{display:inline-block}.export-formats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:24px}.export-format-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px;background:var(--bg-glass);border:2px solid var(--border);border-radius:var(--radius-lg);color:var(--text-primary);font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}.export-format-btn:hover{background:var(--bg-card);border-color:var(--primary);transform:translateY(-2px)}.export-format-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}.export-code{background:var(--bg-darker);border:1px solid var(--border);border-radius:var(--radius-md);padding:20px;overflow-x:auto;max-height:500px;overflow-y:auto}.export-code code{font-family:Menlo,Monaco,Courier New,monospace;font-size:13px;line-height:1.6;color:var(--secondary)}.export-info{padding:20px}.export-info h4{font-size:16px;font-weight:600;margin-bottom:12px;color:var(--text-primary)}.export-info p{color:var(--text-secondary);line-height:1.6}.export-info code{background:var(--bg-card);padding:2px 6px;border-radius:4px;font-family:Menlo,monospace;font-size:13px;color:var(--primary)}@media(max-width:1024px){.sidebar{width:240px;padding:24px 16px}.main-content{margin-left:240px;padding:24px}.view-title{font-size:28px}.shades-grid{grid-template-columns:repeat(auto-fit,minmax(60px,1fr))}}@media(max-width:768px){.app{flex-direction:column}.sidebar{width:100%;height:auto;position:relative;border-right:none;border-bottom:1px solid var(--border);padding:20px 16px;max-height:60vh;overflow-y:auto}.sidebar-header{margin-bottom:20px}.logo{font-size:24px}.nav{flex-direction:row;overflow-x:auto;gap:8px;padding-bottom:8px}.nav-item{flex-shrink:0;padding:10px 16px}.nav-item span{display:none}.nav-item svg:last-child{display:none}.main-content{margin-left:0;padding:20px 16px}.view-header{flex-direction:column;gap:16px}.view-title{font-size:24px}.colors-section,.shades-grid{grid-template-columns:repeat(auto-fit,minmax(60px,1fr))}.color-section-info{flex-direction:column;align-items:flex-start}.preview-grid,.token-grid,.shadows-grid,.radius-grid,.scale-controls,.grid-controls{grid-template-columns:1fr}.ai-generator{flex-direction:column}.accessibility-grid,.export-formats,.breakpoints-grid{grid-template-columns:1fr}}@media(max-width:480px){.sidebar{padding:16px}.logo{font-size:20px}.main-content{padding:16px}.view-title{font-size:20px}.card{padding:16px}.btn-primary,.btn-secondary{width:100%;justify-content:center}.shades-grid{grid-template-columns:repeat(5,1fr)}}