@import "https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap";:root{--bg:#fff8e7;--card-bg:#fff1d6;--card-border:#f0dbb0;--accent:#6bbe5b;--accent-hover:#5aa34a;--accent-dark:#3d7a2e;--brown:#5c4033;--brown-light:#8b6b52;--text:#4a3728;--text-muted:#9a8068;--drop-border:#a8d08d;--drop-bg:#f5f0d8;--drop-active:#e8f5d8;--error:#d45050;--shadow:#5a3c1e14;--shadow-lg:#5a3c1e1f}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);min-height:100vh;font-family:Nunito,Segoe UI,system-ui,sans-serif}header{text-align:center;padding:2.5rem 1rem 1rem}header h1{color:var(--brown);letter-spacing:-.5px;font-size:2rem;font-weight:800}header h1 span{color:var(--accent)}header p{color:var(--brown-light);margin-top:.35rem;font-size:1rem;font-weight:600}#drop-zone{border:3px dashed var(--drop-border);background:var(--drop-bg);text-align:center;cursor:pointer;border-radius:24px;max-width:600px;margin:1.5rem auto;padding:3rem 2rem;transition:background .2s,border-color .2s,transform .15s}#drop-zone:hover{border-color:var(--accent);background:var(--drop-active)}#drop-zone.drag-over{border-color:var(--accent);background:var(--drop-active);transform:scale(1.01)}#drop-zone .icon{margin-bottom:.5rem;font-size:2.5rem;display:block}#drop-zone .label{color:var(--brown);font-size:1.15rem;font-weight:700}#drop-zone .sublabel{color:var(--text-muted);margin-top:.25rem;font-size:.85rem}#file-input{display:none}#error{border:2px solid var(--error);max-width:600px;color:var(--error);background:#fde8e8;border-radius:14px;margin:0 auto 1rem;padding:.85rem 1.25rem;font-weight:600;display:none}#error.visible{display:block}#results{max-width:960px;margin:0 auto 3rem;padding:0 1rem;display:none}#results.visible{display:block}.results-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:1.25rem;display:flex}.results-meta{color:var(--brown);font-weight:600}.results-header-actions{align-items:center;gap:.5rem;display:flex}.results-meta .type-badge{background:var(--accent);color:#fff;vertical-align:middle;border-radius:999px;margin-left:.5rem;padding:.2rem .65rem;font-size:.75rem;font-weight:700;display:inline-block}.btn{cursor:pointer;border:none;border-radius:999px;align-items:center;gap:.4rem;padding:.55rem 1.2rem;font-family:inherit;font-size:.85rem;font-weight:700;transition:background .15s,transform .1s;display:inline-flex}.btn:active{transform:scale(.97)}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-hover)}.btn-sm{padding:.4rem .9rem;font-size:.78rem}.btn-outline{color:var(--accent-dark);border:2px solid var(--accent);background:0 0}.btn-outline:hover{background:var(--accent);color:#fff}.btn-toggle{background:var(--drop-bg);color:var(--brown-light);border:2px solid var(--card-border)}.btn-toggle:hover{border-color:var(--accent);color:var(--brown)}.btn-toggle.active{background:var(--accent);color:#fff;border-color:var(--accent)}.btn-toggle.active:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.file-section{margin-bottom:1.75rem}.file-section-header{border-bottom:2px solid var(--card-border);align-items:center;gap:.5rem;margin-bottom:.75rem;padding-bottom:.5rem;display:flex}.file-section-name{color:var(--brown);font-size:1rem;font-weight:700}.pattern-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem;display:grid}.pattern-card{background:var(--card-bg);border:2px solid var(--card-border);box-shadow:0 2px 6px var(--shadow);border-radius:18px;flex-direction:column;align-items:center;gap:.6rem;padding:1rem;transition:transform .12s,box-shadow .12s;display:flex}.pattern-card:hover{box-shadow:0 4px 12px var(--shadow-lg);transform:translateY(-2px)}.pattern-card canvas,.pro-composite-wrap canvas,.pro-split-thumb canvas{image-rendering:pixelated;background-color:#eee;background-image:linear-gradient(45deg,#ddd 25%,#0000 25%),linear-gradient(-45deg,#ddd 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#ddd 75%),linear-gradient(-45deg,#0000 75%,#ddd 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px}.pattern-card canvas{border:2px solid var(--card-border);border-radius:10px}.pattern-card .card-label{color:var(--brown);text-align:center;word-break:break-word;font-size:.82rem;font-weight:700}.pattern-card .card-sublabel{color:var(--text-muted);font-size:.72rem;font-weight:600}.pro-section{flex-direction:column;align-items:center;gap:1rem;margin-bottom:1.5rem;display:flex}.pro-composite-wrap{background:var(--card-bg);border:2px solid var(--card-border);box-shadow:0 2px 6px var(--shadow);border-radius:18px;flex-direction:column;align-items:center;gap:.75rem;padding:1.25rem;display:flex}.pro-composite-wrap canvas{border:2px solid var(--card-border);border-radius:10px}.pro-splits{flex-wrap:wrap;justify-content:center;gap:.75rem;display:flex}.pro-split-thumb{flex-direction:column;align-items:center;gap:.3rem;display:flex}.pro-split-thumb canvas{border:1px solid var(--card-border);border-radius:6px}.pro-split-thumb .split-label{color:var(--text-muted);text-transform:capitalize;font-size:.68rem;font-weight:700}footer{text-align:center;color:var(--text-muted);padding:1.5rem 1rem 2rem;font-size:.78rem;font-weight:600}footer a{color:var(--accent-dark);text-decoration:none}footer a:hover{text-decoration:underline}