@import"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&family=DM+Mono:wght@400;500&display=swap";:root{--bg: #ffffff;--surface: #f8f9fa;--border: #dee2e6;--text: #212529;--text-secondary: #6c757d;--primary: #8b6f4e;--shadow: 0 1px 3px rgba(0,0,0,.1)}.app-root{width:100vw;height:100vh;display:flex;flex-direction:column;overflow:hidden;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.app-header{height:48px;flex-shrink:0;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 16px;gap:12px;box-shadow:var(--shadow)}.header-logo{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:700;color:var(--primary)}.header-logo-dot{width:12px;height:12px;background:var(--primary);border-radius:50%}.header-sep{width:1px;height:24px;background:var(--border);margin-left:auto}.header-btn{padding:6px 12px;background:white;border:1px solid var(--border);border-radius:6px;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s}.header-btn:hover{background:var(--surface);border-color:var(--primary)}.app-layout{flex:1;display:flex;overflow:hidden}.layer-panel{width:160px;background:var(--surface);border-right:1px solid var(--border);padding:12px;overflow-y:auto}.layer-panel h3{margin:0 0 12px;font-size:14px;font-weight:600;color:var(--text)}.layer-list{display:flex;flex-direction:column;gap:6px}.layer-item{display:flex;flex-direction:column;gap:6px;padding:8px;background:white;border:1px solid var(--border);border-radius:6px;cursor:pointer;transition:all .2s}.layer-item:hover{background:var(--surface);border-color:var(--primary)}.layer-item.active{background:var(--primary);color:#fff;border-color:var(--primary)}.layer-item.active .layer-name,.layer-item.active .layer-opacity span{color:#fff}.layer-controls{display:flex;gap:4px}.layer-visibility,.layer-duplicate{background:none;border:none;font-size:12px;cursor:pointer;padding:2px;border-radius:4px;transition:all .2s}.layer-visibility:hover,.layer-duplicate:hover{background:rgba(0,0,0,.1)}.layer-info{display:flex;flex-direction:column;gap:4px}.layer-name{font-size:12px;font-weight:500}.layer-opacity{display:flex;align-items:center;gap:6px}.layer-opacity input{flex:1;height:4px;background:var(--border);outline:none;cursor:pointer}.layer-opacity input::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:12px;background:var(--primary);border-radius:50%;cursor:pointer}.layer-opacity input::-moz-range-thumb{width:12px;height:12px;background:var(--primary);border-radius:50%;cursor:pointer;border:none}.layer-opacity span{font-size:10px;font-weight:600;color:var(--text-secondary);min-width:30px;text-align:right}.layer-actions{display:flex;align-items:center;gap:4px}.layer-move{background:var(--surface);border:1px solid var(--border);border-radius:4px;font-size:10px;font-weight:600;cursor:pointer;padding:2px 6px;transition:all .2s}.layer-move:hover:not(:disabled){background:var(--primary);color:#fff;border-color:var(--primary)}.layer-move:disabled{opacity:.3;cursor:not-allowed}.layer-active{font-size:10px;font-weight:600;margin-left:auto}.construction-panel{width:120px;background:var(--surface);border-right:1px solid var(--border);padding:12px;overflow-y:auto}.construction-panel h3{margin:0 0 12px;font-size:14px;font-weight:600;color:var(--text)}.construction-tools{display:flex;flex-direction:column;gap:8px}.construction-btn{padding:8px 12px;background:white;border:1px solid var(--border);border-radius:6px;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:6px}.construction-btn:hover{background:var(--surface);border-color:var(--primary)}.construction-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}.measurement-panel{width:120px;background:var(--surface);border-right:1px solid var(--border);padding:12px;overflow-y:auto}.measurement-panel h3{margin:0 0 12px;font-size:14px;font-weight:600;color:var(--text)}.measurement-tools{display:flex;flex-direction:column;gap:8px}.measurement-info{font-size:11px;color:var(--text-secondary);line-height:1.4}.measurement-info p{margin:0 0 4px}.symmetry-segments-input{width:60px;height:4px;background:var(--border);outline:none;cursor:pointer}.symmetry-center-input{width:50px;height:20px;background:var(--surface);border:1px solid var(--border);border-radius:4px;font-size:11px;padding:2px;outline:none}.mobile-symmetry-controls{margin-bottom:20px}.mobile-symmetry-controls h4{margin:0 0 8px;font-size:14px;font-weight:600;color:var(--text-secondary)}.mobile-symmetry-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.mobile-symmetry-btn{padding:8px 4px;background:white;border:1px solid var(--border);border-radius:6px;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:4px}.mobile-symmetry-btn:hover{background:var(--surface);border-color:var(--primary)}.mobile-symmetry-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}.toolbar-desktop{width:60px;background:var(--surface);border-right:1px solid var(--border);padding:8px;display:flex;flex-direction:column;gap:16px}.toolbar-section{display:flex;flex-direction:column;gap:4px}.toolbar-btn{width:44px;height:44px;background:white;border:1px solid var(--border);border-radius:6px;font-size:10px;font-weight:500;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}.toolbar-btn:hover{background:var(--surface);border-color:var(--primary)}.toolbar-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}.toolbar-label{font-size:10px;text-align:center;color:var(--text-secondary);margin:2px 0}.canvas-area{flex:1;background:var(--bg);overflow:auto;display:flex;align-items:center;justify-content:center;position:relative}.canvas-scroll{background:white;border:1px solid var(--border);border-radius:8px;padding:20px;box-shadow:var(--shadow)}.bead-canvas{background:white;border:1px solid var(--border);transition:all .2s ease}.bead-canvas.round{background:#f5f5f5;border:1px solid var(--border)}.bead-cell.round{transition:all .2s ease;box-shadow:0 1px 3px #0000001a}.bead-cell.round:hover{transform:scale(1.1);box-shadow:0 2px 6px #0003}.bead-cell.square:hover{opacity:.8}.tool-indicator{position:absolute;bottom:20px;left:50%;transform:translate(-50%);background:var(--primary);color:#fff;padding:8px 16px;border-radius:20px;font-size:12px;font-weight:600;box-shadow:0 2px 8px #0003;pointer-events:none;z-index:10}.right-col{width:200px;background:var(--surface);border-left:1px solid var(--border);padding:16px;overflow-y:auto}.palette-panel h3{margin:0 0 12px;font-size:14px;font-weight:600;color:var(--text)}.current-color-display{display:flex;align-items:center;gap:8px;margin-bottom:12px;padding:8px;background:white;border:1px solid var(--border);border-radius:6px}.current-color-box{width:24px;height:24px;border:1px solid var(--border);border-radius:4px}.current-color-text{font-size:11px;font-family:Courier New,monospace;color:var(--text-secondary)}.recent-colors h4{margin:0 0 6px;font-size:12px;font-weight:600;color:var(--text-secondary)}.recent-color-grid{justify-content:flex-start}.color-btn.recent{transition:all .2s ease}.color-btn.recent:hover{transform:scale(1.1);border-color:var(--primary)}.color-grid{gap:4px;margin-top:8px}.color-btn{border:2px solid var(--border);border-radius:4px;cursor:pointer;transition:all .2s ease}.color-btn:hover{transform:scale(1.1);border-color:var(--primary);z-index:1}.color-btn.active{border-color:var(--text);box-shadow:0 0 0 2px var(--primary)}.color-preview{position:absolute;top:-40px;left:50%;transform:translate(-50%);background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:4px 8px;display:flex;align-items:center;gap:6px;box-shadow:var(--shadow);z-index:10;pointer-events:none}.preview-box{width:16px;height:16px;border:1px solid var(--border);border-radius:2px}.preview-text{font-size:10px;font-family:Courier New,monospace;color:var(--text)}@media (max-width: 768px){.toolbar-desktop,.layer-panel,.right-col{display:none}.header-btn{padding:4px 8px;font-size:11px}.canvas-area{width:100%}.mobile-nav{display:flex}}.mobile-nav{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--surface);border-top:1px solid var(--border);padding:8px;gap:8px;justify-content:space-around;z-index:100}.mobile-nav-btn{flex:1;padding:8px 4px;background:white;border:1px solid var(--border);border-radius:6px;font-size:11px;font-weight:500;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:2px}.mobile-nav-btn:hover{background:var(--surface);border-color:var(--primary)}.mobile-nav-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}.mobile-panel-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:200}.mobile-panel{position:fixed;bottom:0;left:0;right:0;background:white;border-top:1px solid var(--border);border-radius:20px 20px 0 0;padding:20px;max-height:70vh;overflow-y:auto;z-index:201;animation:slideUp .3s ease-out}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.mobile-menu h3{margin:0 0 16px;font-size:18px;font-weight:600;color:var(--text)}.mobile-menu-btn{width:100%;padding:12px;background:white;border:1px solid var(--border);border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;margin-bottom:8px;display:flex;align-items:center;gap:8px}.mobile-menu-btn:hover{background:var(--surface);border-color:var(--primary)}.mobile-tools h3{margin:0 0 16px;font-size:18px;font-weight:600;color:var(--text)}.mobile-tool-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:20px}.mobile-tool-btn{padding:12px;background:white;border:1px solid var(--border);border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.mobile-tool-btn:hover{background:var(--surface);border-color:var(--primary)}.mobile-tool-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}.mobile-grid-controls,.mobile-zoom-controls{margin-bottom:20px}.mobile-grid-controls h4,.mobile-zoom-controls h4{margin:0 0 8px;font-size:14px;font-weight:600;color:var(--text-secondary)}.mobile-grid-buttons{display:flex;gap:8px}.mobile-grid-btn{flex:1;padding:8px;background:white;border:1px solid var(--border);border-radius:6px;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s}.mobile-grid-btn:hover{background:var(--surface);border-color:var(--primary)}.mobile-grid-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}.mobile-zoom-buttons{display:flex;align-items:center;gap:12px;background:white;border:1px solid var(--border);border-radius:8px;padding:8px 12px}.mobile-zoom-buttons button{width:32px;height:32px;background:var(--surface);border:1px solid var(--border);border-radius:4px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s}.mobile-zoom-buttons button:hover{background:var(--primary);color:#fff}.mobile-zoom-buttons span{font-size:12px;font-weight:600;color:var(--text);min-width:40px;text-align:center}.mobile-colors h3{margin:0 0 16px;font-size:18px;font-weight:600;color:var(--text)}.mobile-current-color{display:flex;align-items:center;gap:8px;margin-bottom:16px;padding:8px;background:var(--surface);border-radius:8px}.mobile-current-color-box{width:24px;height:24px;border:1px solid var(--border);border-radius:4px}.mobile-current-color span{font-size:11px;font-family:Courier New,monospace;color:var(--text)}.mobile-recent-colors h4{margin:0 0 8px;font-size:14px;font-weight:600;color:var(--text-secondary)}.mobile-recent-grid{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}.mobile-color-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}.mobile-color-btn{width:32px;height:32px;border:2px solid var(--border);border-radius:4px;cursor:pointer;transition:all .2s ease}.mobile-color-btn:hover{transform:scale(1.1);border-color:var(--primary)}.mobile-color-btn.active{border-color:var(--text);box-shadow:0 0 0 2px var(--primary)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%;overflow:hidden}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}:root,[data-theme=muji]{--bg: #F5F2EE;--surface: #FFFFFF;--toolbar: #FEFCFA;--border: #E4DED6;--border2: #C8C2BA;--text: #2A2520;--text2: #7A746C;--text3: #A8A29A;--accent: #4F7BE8;--accent-h: #3A66D4;--green: #2E9E5B;--green-h: #237A47;--red: #E84040;--canvas-bg: #EDE9E3;--grid-5: #B8B0A6;--grid-1: #DDD8D2;--shadow: 0 1px 3px rgba(0,0,0,.08), 0 3px 10px rgba(0,0,0,.05);--shadow-lg: 0 4px 24px rgba(0,0,0,.12), 0 1px 4px rgba(0,0,0,.06);--r: 8px;--r-sm: 6px;--r-xs: 4px;--bg-primary: #F5F2EE;--bg-secondary:#EDE9E3;--bg-panel: #FFFFFF;--bg-toolbar: #FEFCFA;--border-dark: #C8C2BA;--text-primary:#2A2520;--text-secondary:#7A746C;--text-muted: #A8A29A;--grid-line: #DDD8D2;--grid-empty: #FAF8F5;--pixel-border:1px solid #E4DED6}[data-theme=obsidian]{--bg: #111111;--surface: #1C1C1C;--toolbar: #161616;--border: #2A2A2A;--border2: #3A3A3A;--text: #E8E8E8;--text2: #888888;--text3: #555555;--accent: #6B9BF2;--accent-h: #5588E8;--green: #3AB56A;--green-h: #2E9E5B;--red: #E84040;--canvas-bg: #141414;--grid-5: #333333;--grid-1: #222222;--shadow: 0 1px 3px rgba(0,0,0,.4);--shadow-lg: 0 4px 24px rgba(0,0,0,.5);--r: 8px;--r-sm: 6px;--r-xs: 4px;--bg-primary: #111111;--bg-secondary: #141414;--bg-panel: #1C1C1C;--bg-toolbar: #161616;--border-dark: #3A3A3A;--text-primary: #E8E8E8;--text-secondary: #888888;--text-muted: #555555;--grid-line: #222222;--grid-empty: #0D0D0D;--pixel-border: 1px solid #2A2A2A}[data-theme=chalk]{--bg: #F8F8F8;--surface: #FFFFFF;--toolbar: #FAFAFA;--border: #E0E0E0;--border2: #CCCCCC;--text: #1A1A1A;--text2: #666666;--text3: #AAAAAA;--accent: #4F7BE8;--accent-h: #3A66D4;--green: #2E9E5B;--green-h: #237A47;--red: #E84040;--canvas-bg: #F2F2F2;--grid-5: #CCCCCC;--grid-1: #E8E8E8;--shadow: 0 1px 3px rgba(0,0,0,.06), 0 3px 10px rgba(0,0,0,.04);--shadow-lg: 0 4px 24px rgba(0,0,0,.09);--r: 8px;--r-sm: 6px;--r-xs: 4px;--bg-primary: #F8F8F8;--bg-secondary: #F2F2F2;--bg-panel: #FFFFFF;--bg-toolbar: #FAFAFA;--border-dark: #CCCCCC;--text-primary: #1A1A1A;--text-secondary: #666666;--text-muted: #AAAAAA;--grid-line: #E8E8E8;--grid-empty: #FAFAFA;--pixel-border: 1px solid #E0E0E0}[data-theme=sakura]{--bg: #FDF0F3;--surface: #FFFFFF;--toolbar: #FFF7F9;--border: #F0D0DA;--border2: #DAAAB8;--text: #3D1F2A;--text2: #8B5A6A;--text3: #C090A0;--accent: #C0607A;--accent-h: #A84F68;--green: #2E9E5B;--green-h: #237A47;--red: #E84040;--canvas-bg: #FAE8EE;--grid-5: #D4AABB;--grid-1: #F0D0DA;--shadow: 0 1px 3px rgba(180,80,100,.1), 0 3px 10px rgba(180,80,100,.06);--shadow-lg: 0 4px 24px rgba(180,80,100,.14);--r: 8px;--r-sm: 6px;--r-xs: 4px;--bg-primary: #FDF0F3;--bg-secondary: #FAE8EE;--bg-panel: #FFFFFF;--bg-toolbar: #FFF7F9;--border-dark: #DAAAB8;--text-primary: #3D1F2A;--text-secondary: #8B5A6A;--text-muted: #C090A0;--grid-line: #F0D0DA;--grid-empty: #FFF7F9;--pixel-border: 1px solid #F0D0DA}body{font-family:DM Sans,sans-serif;background:var(--bg);color:var(--text);font-size:13px}.px-panel{background:var(--surface)}.px-btn,.btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;border:1px solid var(--border2);background:var(--surface);color:var(--text);font-family:DM Sans,sans-serif;font-size:12px;font-weight:600;padding:5px 11px;border-radius:var(--r-sm);cursor:pointer;transition:background .12s}.px-btn:hover,.btn:hover{background:var(--bg)}.px-btn.active,.btn.active{background:var(--accent);border-color:var(--accent);color:#fff}.px-label,.rp-label{font-size:11px;color:var(--text2);font-weight:500;display:block;margin-bottom:4px;font-family:DM Sans,sans-serif}.px-input,.rp-input{width:100%;padding:6px 10px;border:1px solid var(--border);border-radius:var(--r-sm);font-family:DM Sans,sans-serif;font-size:12px;background:var(--bg);color:var(--text)}.px-input:focus,.rp-input:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent}