:root{--cream: #f5f0e8;--warm-white: #faf7f2;--ink: #1a1410;--sepia: #6b4f35;--gold: #b8973a;--gold-light: #d4af5a;--shadow-warm: rgba(107, 79, 53, .15);--border: rgba(107, 79, 53, .2)}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--cream);color:var(--ink);font-family:Raleway,sans-serif;min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:48px 24px;background-image:radial-gradient(ellipse at 20% 10%,rgba(184,151,58,.06) 0%,transparent 50%),radial-gradient(ellipse at 80% 90%,rgba(107,79,53,.06) 0%,transparent 50%)}header{text-align:center;margin-bottom:48px}.eyebrow{font-family:Raleway,sans-serif;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}h1{font-family:Playfair Display,serif;font-size:clamp(2rem,5vw,3.2rem);font-weight:400;color:var(--ink);line-height:1.1}h1 em{font-style:italic;color:var(--sepia)}.subtitle{margin-top:12px;font-size:11px;color:var(--sepia);letter-spacing:.05em;opacity:.7}.card{background:var(--warm-white);border:1px solid var(--border);border-radius:2px;padding:36px;width:100%;max-width:680px;box-shadow:0 4px 32px var(--shadow-warm),0 1px 4px #0000000a;position:relative}.card:before{content:"";position:absolute;inset:4px;border:1px solid var(--border);border-radius:2px;pointer-events:none;opacity:.4}.section-label{font-size:16px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:20px;display:flex;align-items:center;gap:12px}.section-label:after{content:"";flex:1;height:1px;background:var(--border)}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px}.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;margin-bottom:24px}.field{display:flex;flex-direction:column;gap:8px}label{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--sepia)}.input-wrap{position:relative;display:flex;align-items:center}input[type=number],input[type=text],select{width:100%;padding:10px 44px 10px 14px;background:var(--cream);border:1px solid var(--border);border-radius:1px;font-family:JetBrains Mono,monospace;font-size:14px;color:var(--ink);outline:none;transition:border-color .2s,box-shadow .2s;-moz-appearance:textfield}input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none}input[type=number]:focus,input[type=text]:focus,select:focus{border-color:var(--gold);box-shadow:0 0 0 3px #b8973a1a}.unit{position:absolute;right:12px;font-size:10px;color:var(--sepia);opacity:.6;pointer-events:none}select{padding-right:14px;cursor:pointer;appearance:none}.select-wrap{position:relative}.select-wrap:after{content:"▾";position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--sepia);font-size:12px;pointer-events:none}.divider{height:1px;background:var(--border);margin:28px 0}.results{margin-top:32px;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}.results.visible{opacity:1;transform:translateY(0)}.preview-wrap{margin-top:28px;margin-bottom:16px;display:flex;flex-direction:column;align-items:center;gap:12px}canvas{max-width:100%;display:block}.preview-drop-zone{position:relative;border:2px solid transparent;border-radius:2px;transition:border-color .2s}.preview-drop-zone.drag-over{border-color:var(--gold);border-style:dashed}.drop-overlay{position:absolute;inset:0;background:#b8973a26;display:flex;align-items:center;justify-content:center;font-family:Playfair Display,serif;font-size:1.1rem;font-style:italic;color:var(--gold);pointer-events:none}.preview-actions{display:flex;align-items:center;gap:10px;margin-top:4px}.preview-btn{background:var(--cream);color:var(--sepia);border:1px solid var(--border);border-radius:1px;padding:6px 16px;font-family:Raleway,sans-serif;font-size:10px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s,border-color .2s}.preview-btn:hover{background:var(--gold);color:var(--warm-white);border-color:var(--gold)}.preview-hint{font-size:10px;font-style:italic;color:var(--sepia);opacity:.5}.banana-toggle{display:flex;align-items:center;gap:6px;cursor:pointer;margin-left:6px}.banana-toggle input[type=checkbox]{accent-color:var(--gold);width:14px;height:14px;cursor:pointer}.banana-toggle-label{font-size:10px;letter-spacing:.08em;color:var(--sepia);opacity:.7;white-space:nowrap}.mat-swatches{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:8px}.mat-swatches-label{font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}.mat-swatches-label.suggested-label{color:var(--sepia);opacity:.8}.mat-swatch-row{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}.mat-swatch{width:22px;height:22px;border-radius:50%;border:2px solid var(--border);cursor:pointer;transition:transform .15s,border-color .15s,box-shadow .15s;padding:0}.mat-swatch:hover{transform:scale(1.15);border-color:var(--gold-light)}.mat-swatch.active{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold-light);transform:scale(1.1)}.mat-swatch.custom{background:conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.mat-color-input{position:absolute;width:0;height:0;overflow:hidden;opacity:0;pointer-events:none}.detail-table{width:100%;border-collapse:collapse;margin-top:24px;font-size:13px}.detail-table tr{border-bottom:1px solid var(--border)}.detail-table tr:last-child{border-bottom:none}.detail-table td{padding:9px 4px;color:var(--sepia)}.detail-table td:first-child{width:60%;letter-spacing:.08em;opacity:.7}.detail-table td:nth-child(2){font-family:Raleway,sans-serif;font-weight:500;color:var(--ink);font-size:14px}.cut-list{margin-top:28px}.cut-list-label{font-size:16px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:12px;display:flex;align-items:center;gap:12px}.cut-list-label:after{content:"";flex:1;height:1px;background:var(--border)}.cut-list-total td{border-top:2px solid var(--border);border-bottom:none;font-weight:600}.cut-list-total{border-bottom:none!important}.detail-table thead td{font-family:Raleway,sans-serif;font-size:14px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--ink);opacity:.5;padding-bottom:6px}.note{margin-top:20px;font-size:10px;color:var(--sepia);opacity:.6;line-height:1.7;font-style:italic;text-align:center}