*{margin:0;padding:0;box-sizing:border-box}:root{--bg-primary: #ffffff;--bg-secondary: #f8f9fa;--text-primary: #212529;--text-secondary: #6c757d;--border-color: #e9ecef;--accent-color: #007bff;--accent-hover: #0056b3;--success-color: #28a745;--error-color: #dc3545}[data-theme=dark]{--bg-primary: #1a1a1a;--bg-secondary: #2d2d2d;--text-primary: #ffffff;--text-secondary: #b0b0b0;--border-color: #404040;--accent-color: #4dabf7;--accent-hover: #339af0;--success-color: #51cf66;--error-color: #ff6b6b}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg-secondary);color:var(--text-primary);line-height:1.6;transition:background-color .3s ease,color .3s ease}#root{min-height:100vh}.header{background:var(--bg-primary);border-bottom:1px solid var(--border-color);padding:16px 24px;position:sticky;top:0;z-index:100}.header-content{max-width:1400px;margin:0 auto;display:flex;justify-content:space-between;align-items:center}.header-left{display:flex;align-items:center;gap:24px}.app-title{font-size:1.5rem;font-weight:700;color:var(--text-primary)}.header-right{display:flex;gap:12px;align-items:center}.theme-toggle,.github-button{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;padding:8px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;width:40px;height:40px;text-decoration:none}.theme-toggle:hover,.github-button:hover{background:var(--border-color)}.theme-toggle svg,.github-button svg{width:20px;height:20px;fill:var(--text-primary)}.theme-toggle svg{fill:none;stroke:var(--text-primary)}.main-container{max-width:1400px;margin:0 auto;padding:24px}.main-layout{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}.left-column{display:flex;flex-direction:column;gap:24px}.right-column{display:flex;flex-direction:column;gap:24px;min-height:400px}.size-section{display:flex;flex-direction:column;gap:16px;align-items:center}.size-label{font-weight:700;color:var(--text-primary);font-size:1.1rem;text-transform:uppercase;letter-spacing:.5px}.size-buttons{display:flex;gap:12px}.size-button{padding:16px 20px;border:2px solid var(--border-color);border-radius:8px;background:var(--bg-primary);color:var(--text-primary);font-weight:700;font-size:1.1rem;cursor:pointer;transition:all .2s ease;min-width:80px}.size-button.active{background:var(--accent-color);color:#fff;border-color:var(--accent-color)}.size-button:hover:not(.active){background:var(--bg-secondary);border-color:var(--accent-color)}.id-section{display:flex;flex-direction:column;gap:12px;align-items:center}.id-label{font-weight:700;color:var(--text-primary);font-size:1.1rem;text-transform:uppercase;letter-spacing:.5px}.id-controls{display:flex;align-items:center;gap:8px}.id-button{width:40px;height:40px;border:2px solid var(--border-color);border-radius:8px;background:var(--bg-primary);color:var(--text-primary);font-weight:700;font-size:1.2rem;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.id-button:hover{background:var(--bg-secondary);border-color:var(--accent-color)}.id-input{font-size:2.5rem;font-weight:700;padding:20px 24px;border:2px solid var(--border-color);border-radius:8px;background:var(--bg-primary);color:var(--text-primary);transition:all .2s ease;width:140px;font-family:inherit;text-align:center;-moz-appearance:textfield}.id-input::-webkit-outer-spin-button,.id-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.id-input:focus{outline:none;border-color:var(--accent-color);background:var(--bg-secondary)}.id-range{font-size:.9rem;color:var(--text-secondary);text-align:center;font-weight:500}.customization-section{display:flex;flex-direction:column;gap:24px}.customization-title{font-weight:700;color:var(--text-primary);font-size:1rem;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}.color-section{display:flex;flex-direction:column;gap:16px}.color-group{display:flex;flex-direction:column;gap:8px}.color-label{font-weight:600;color:var(--text-primary);font-size:.9rem}.color-swatches{display:flex;gap:8px;flex-wrap:wrap}.color-swatch{width:40px;height:40px;border:2px solid var(--border-color);border-radius:8px;cursor:pointer;transition:all .2s ease;position:relative}.color-swatch:hover{transform:scale(1.1)}.color-swatch.active{border-color:var(--accent-color);transform:scale(1.1)}.color-swatch.active:after{content:"✓";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-weight:700;text-shadow:0 0 2px rgba(0,0,0,.8)}.reset-colors{background:var(--accent-color);color:#fff;border:none;padding:8px 16px;border-radius:20px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s ease;align-self:flex-start}.reset-colors:hover{background:var(--accent-hover)}.curved-mode-toggle{margin-top:16px}.toggle-label{display:flex;align-items:center;cursor:pointer;gap:12px}.toggle-input{display:none}.toggle-slider{position:relative;width:44px;height:24px;background:var(--bg-secondary);border-radius:12px;transition:all .3s ease}.toggle-slider:before{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;background:var(--text-secondary);border-radius:50%;transition:all .3s ease}.toggle-input:checked+.toggle-slider{background:var(--accent-color)}.toggle-input:checked+.toggle-slider:before{transform:translate(20px);background:white}.toggle-text{font-size:.875rem;color:var(--text-primary);font-weight:500}.control-group{display:flex;flex-direction:column;gap:8px}.label{font-weight:600;color:var(--text-primary);font-size:.9rem;text-transform:uppercase;letter-spacing:.5px}.input{padding:12px 16px;border:2px solid var(--border-color);border-radius:8px;font-size:.9rem;font-family:inherit;background:var(--bg-primary);color:var(--text-primary);transition:all .2s ease;width:100px}.input:focus{outline:none;border-color:var(--accent-color);background:var(--bg-secondary)}.aruco-display{display:flex;flex-direction:column;align-items:center;gap:24px;width:100%;height:100%;justify-content:center}.aruco-grid{display:inline-grid;gap:0;padding:32px;background:var(--bg-primary);border-radius:12px;border:1px solid var(--border-color);transition:all .3s ease;width:100%;max-width:min(100%,80vh);max-height:min(100%,80vh)}.aruco-cell{transition:all .1s ease;aspect-ratio:1;min-width:8px;min-height:8px}.info-section{display:flex;flex-direction:column;gap:24px}.info-card{background:var(--bg-primary);border-radius:8px;padding:20px;border:1px solid var(--border-color)}.info-title{font-weight:700;color:var(--accent-color);font-size:1.1rem;margin-bottom:12px;text-transform:uppercase;letter-spacing:.5px}.info-content{color:var(--text-primary);font-size:1rem;line-height:1.6}.bit-representation{font-family:Courier New,monospace;background:var(--bg-secondary);padding:12px;border-radius:8px;border:1px solid var(--border-color);font-size:.9rem;white-space:pre-wrap;word-break:break-all;position:relative}.copy-button{position:absolute;top:8px;right:8px;background:var(--accent-color);color:#fff;border:none;padding:4px 8px;border-radius:4px;font-size:.8rem;cursor:pointer;transition:all .2s ease}.copy-button:hover{background:var(--accent-hover)}.download-buttons{display:flex;gap:12px;margin-top:24px;justify-content:center}.download-button{display:flex;align-items:center;gap:8px;color:#fff;border:none;padding:12px 20px;border-radius:8px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s ease;text-transform:uppercase;letter-spacing:.5px}.download-button.png{background:#007bff}.download-button.png:hover{background:#0056b3}.download-button.svg{background:#28a745}.download-button.svg:hover{background:#20c997}.download-button svg{width:16px;height:16px;fill:currentColor}.loading{text-align:center;color:var(--text-secondary);font-style:italic;font-size:1.1rem;padding:40px}.error{background:rgba(220,53,69,.1);color:var(--error-color);padding:16px;border-radius:8px;border:1px solid rgba(220,53,69,.2);text-align:center;font-weight:500;margin-bottom:20px}.hex-input{padding:8px 12px;border:2px solid var(--border-color);border-radius:8px;font-size:.9rem;font-family:Courier New,monospace;background:var(--bg-primary);color:var(--text-primary);width:80px;height:40px;margin-left:0;transition:all .2s ease;text-align:center;font-weight:600}.color-preview{width:40px;height:40px;border:2px solid var(--border-color);border-radius:8px;cursor:pointer;transition:all .2s ease;margin-left:0;position:relative;overflow:hidden}.color-preview:hover{transform:scale(1.05);border-color:var(--accent-color)}.color-preview:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:14px;height:14px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='m18.5 2.5 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;opacity:.9;pointer-events:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}.color-preview::-webkit-color-swatch-wrapper{padding:0;border:none}.color-preview::-webkit-color-swatch{border:none;border-radius:6px}.color-preview::-moz-color-swatch{border:none;border-radius:6px}.hex-input:focus{outline:none;border-color:var(--accent-color);background:var(--bg-secondary);box-shadow:0 0 0 2px #007bff33}@media (max-width: 1024px){.controls-grid,.display-section{grid-template-columns:1fr;gap:24px}.color-swatches{justify-content:center}}@media (max-width: 768px){.main-layout{grid-template-columns:1fr;gap:24px}.left-column{display:flex;flex-direction:column;gap:24px}.size-section{order:1}.id-section{order:2}.customization-section{order:5}.right-column{order:3}.aruco-grid{width:auto;max-width:300px}.size-buttons{flex-wrap:wrap;justify-content:center}.id-input{width:100%;font-size:2rem}.header-content{flex-direction:column;gap:16px}.header-left{flex-direction:column;gap:12px}.aruco-cell{width:20px;height:20px;border-radius:2px}.download-buttons{flex-direction:column;order:4}.hex-input,.color-preview{margin-left:0}}