*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--green: #4a7c59;--green-dark: #3d6a4a;--green-light: #f0f7f2;--bg: #f5f0e8;--card: #ffffff;--text: #2c2c2c;--muted: #888;--border: #e8e0d4}body{font-family:Segoe UI,system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100vh}.app{max-width:1120px;margin:0 auto;padding:28px 16px 56px}header{text-align:center;margin-bottom:36px}header h1{font-size:2rem;color:var(--green);margin-bottom:6px}header p{color:var(--muted);font-size:1rem}.card{background:var(--card);border-radius:16px;padding:22px 24px;box-shadow:0 2px 10px #0000000f}.card h3{font-size:.78rem;font-weight:700;color:var(--green);text-transform:uppercase;letter-spacing:1px;margin-bottom:16px}.upload-card{max-width:500px;margin:0 auto 16px;background:var(--card);border-radius:20px;box-shadow:0 2px 14px #00000014;overflow:hidden}.drop-zone{padding:52px 24px 44px;border:2px dashed #c8bba8;border-radius:20px;text-align:center;cursor:pointer;transition:background .18s,border-color .18s}.drop-zone.drag-over,.drop-zone:hover{border-color:var(--green);background:var(--green-light)}.drop-icon{font-size:3rem;line-height:1;margin-bottom:14px}.drop-zone p{color:var(--muted);margin-bottom:6px}.drop-zone .hint{font-size:.82rem;color:#bbb;margin-bottom:18px}.preview-wrap{padding:20px}.preview-wrap img{width:100%;max-height:280px;object-fit:contain;border-radius:12px;display:block;margin-bottom:14px}.preview-actions{display:flex;gap:8px;justify-content:center}.btn-primary{background:var(--green);color:#fff;border:none;padding:10px 28px;border-radius:10px;cursor:pointer;font-size:.95rem;font-weight:700}.btn-primary:hover{background:var(--green-dark)}.btn-upload{background:var(--green);color:#fff;border:none;padding:10px 26px;border-radius:10px;cursor:pointer;font-size:.95rem;font-weight:600}.btn-upload:hover{background:var(--green-dark)}.btn-ghost{background:transparent;color:var(--muted);border:1px solid var(--border);padding:10px 20px;border-radius:10px;cursor:pointer;font-size:.92rem}.btn-ghost:hover{background:#f5f5f5}.btn-sm{background:transparent;border:1px solid var(--border);color:#555;padding:6px 14px;border-radius:8px;cursor:pointer;font-size:.82rem}.btn-sm:hover{background:#f5f5f5}.btn-sm.active{background:var(--green);color:#fff;border-color:var(--green)}.btn-copy{background:transparent;border:1px solid var(--border);color:var(--muted);padding:5px 12px;border-radius:8px;cursor:pointer;font-size:.78rem}.btn-copy:hover{background:var(--green-light);color:var(--green);border-color:var(--green)}.btn-demo{background:transparent;color:var(--green);border:1.5px dashed var(--green);padding:8px 22px;border-radius:10px;cursor:pointer;font-size:.88rem;font-weight:600}.btn-demo:hover{background:var(--green);color:#fff}.btn-new{display:block;margin:28px auto 0;background:transparent;color:var(--green);border:2px solid var(--green);padding:10px 30px;border-radius:10px;cursor:pointer;font-size:.95rem;font-weight:700}.btn-new:hover{background:var(--green);color:#fff}.demo-strip{max-width:500px;margin:0 auto 12px;text-align:center}.demo-strip p{color:#bbb;font-size:.82rem;margin-bottom:8px}.error-box{background:#fce4ec;color:#b71c1c;border-radius:12px;padding:14px 20px;text-align:center;margin-bottom:24px;max-width:600px;margin-left:auto;margin-right:auto}.loading{text-align:center;padding:60px 24px}.spinner{width:52px;height:52px;border:5px solid #e0d5c5;border-top-color:var(--green);border-radius:50%;animation:spin .75s linear infinite;margin:0 auto 18px}@keyframes spin{to{transform:rotate(360deg)}}.loading p{color:#666;font-size:1rem}.loading-sub{font-size:.82rem;color:#aaa;margin-top:6px}.step-list{list-style:none;display:flex;flex-direction:column;align-items:center;gap:5px;margin-top:18px}.step-item{display:flex;align-items:center;gap:8px;font-size:.82rem;color:#ccc;transition:color .3s}.step-item.active{color:var(--green);font-weight:700}.step-item.done{color:#aaa}.step-dot{width:7px;height:7px;border-radius:50%;background:#e0d5c5;flex-shrink:0;transition:background .3s}.step-item.active .step-dot{background:var(--green)}.step-item.done .step-dot{background:#a8c5b0}.pattern-header{background:var(--card);border-radius:16px;padding:22px 26px;margin-bottom:24px;box-shadow:0 2px 10px #0000000f;display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:12px}.pattern-title{font-size:1.45rem;font-weight:700}.pattern-size{color:var(--muted);font-size:.88rem;margin-top:3px}.badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}.badge{padding:4px 12px;border-radius:20px;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px}.badge-shape{background:#e0f2f1;color:#00695c}.badge-beginner{background:#e8f5e9;color:#2e7d32}.badge-intermediate{background:#fff3e0;color:#e65100}.badge-advanced{background:#fce4ec;color:#b71c1c}.stats-bar{display:flex;background:var(--card);border-radius:12px;overflow:hidden;margin-bottom:24px;box-shadow:0 2px 10px #0000000f}.stat-item{flex:1;min-width:100px;padding:14px 18px;border-right:1px solid #f0ece4;text-align:center}.stat-item:last-child{border-right:none}.stat-value{font-size:1.25rem;font-weight:800;color:var(--green)}.stat-label{font-size:.7rem;color:#aaa;text-transform:uppercase;letter-spacing:.5px;margin-top:2px}.content-grid{display:grid;grid-template-columns:1fr 300px;gap:24px;align-items:start}@media (max-width: 780px){.content-grid{grid-template-columns:1fr}}.col-left,.col-right{display:flex;flex-direction:column;gap:20px}.chart-toolbar{display:flex;gap:8px;margin-bottom:14px;align-items:center}.zoom-group{display:flex;align-items:center;gap:4px;margin-left:auto}.zoom-level{font-size:.74rem;color:var(--muted);min-width:34px;text-align:center;font-family:monospace}.chart-svg{min-height:180px;display:flex;justify-content:center;overflow:auto}.color-swatch{display:flex;align-items:center;gap:10px;margin-bottom:10px}.swatch{width:30px;height:30px;border-radius:7px;flex-shrink:0;border:1px solid rgba(0,0,0,.12)}.swatch-id{font-weight:800;color:var(--green);margin-right:4px;font-size:.88rem}.swatch-name{color:#444;font-size:.86rem}.swatch-hex{font-family:monospace;font-size:.73rem;color:#aaa;display:block}.mat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mat-item{background:#f8f6f2;padding:12px;border-radius:10px}.mat-label{font-size:.72rem;color:#999;text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px}.mat-value{font-weight:700;color:var(--text);font-size:.88rem}.stitch-legend{display:flex;flex-direction:column;gap:7px}.stitch-row{display:flex;align-items:center;gap:10px;font-size:.85rem}.stitch-sym{width:26px;height:26px;border-radius:6px;background:var(--green-light);border:1px solid #c8ddd1;display:flex;align-items:center;justify-content:center;font-size:1rem;font-family:serif;flex-shrink:0;color:#2c6e49}.stitch-abbr{font-weight:700;color:var(--green);margin-right:3px}.instr-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.instr-header h3{margin-bottom:0}.instr-list{list-style:none;counter-reset:steps}.instr-list li{counter-increment:steps;display:flex;gap:12px;margin-bottom:11px;line-height:1.55;font-size:.9rem;color:#333}.instr-list li:before{content:counter(steps);background:var(--green);color:#fff;min-width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800;flex-shrink:0;margin-top:1px}.notes-box{background:#fdf8ee;border-left:3px solid #c4965a;padding:12px 16px;border-radius:0 8px 8px 0;font-size:.88rem;color:#5a4a35;line-height:1.55}.history-section{margin-top:24px}.history-label{font-size:.72rem;font-weight:700;color:#bbb;text-transform:uppercase;letter-spacing:1px;margin-bottom:10px;text-align:center}.history-list{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.history-card{background:var(--card);border-radius:12px;padding:12px 14px;cursor:pointer;width:136px;box-shadow:0 1px 6px #00000012;border:1.5px solid transparent;transition:box-shadow .15s,transform .15s}.history-card:hover{box-shadow:0 4px 16px #0000001f;transform:translateY(-2px);border-color:var(--green)}.hist-colors{display:flex;gap:4px;margin-bottom:8px;flex-wrap:wrap}.hist-dot{width:13px;height:13px;border-radius:50%;border:1px solid rgba(0,0,0,.1);flex-shrink:0}.hist-title{font-size:.8rem;font-weight:700;color:var(--text);margin-bottom:3px;line-height:1.3}.hist-meta{font-size:.7rem;color:#aaa}