:root{--cream: #fffef5;--soft-purple: #5c4a72;--pastel-blue: #89b8d4;--pastel-pink: #f4c4d4;--pastel-yellow: #fff5ba;--soft-gray: #e8e4df;--text-primary: #3d5a6c;--text-secondary: #8b7e99;--accent-coral: #ff9aa2;--accent-mint: #b5ead7}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Arial Rounded MT Bold,-apple-system,BlinkMacSystemFont,sans-serif;color:var(--text-primary);line-height:1.6}.gradient-bg{min-height:100vh;background:linear-gradient(135deg,var(--pastel-yellow) 0%,var(--cream) 25%,var(--pastel-pink) 50%,var(--pastel-blue) 100%);padding:2rem 1rem}.container{max-width:1200px;margin:0 auto}.title{font-size:2.5rem;font-weight:800;color:var(--soft-purple);text-align:center;margin-bottom:.5rem;text-shadow:2px 2px 0px rgba(255,255,255,.5);letter-spacing:-.5px}.subtitle{text-align:center;font-size:1.1rem;color:var(--text-secondary);margin-bottom:2rem;font-weight:500}.section-title{font-size:1.5rem;font-weight:700;color:var(--soft-purple);margin-bottom:1.5rem;display:flex;align-items:center;gap:.5rem}.card{background:#ffffffe6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:24px;padding:2rem;margin-bottom:1.5rem;box-shadow:0 8px 32px #5c4a7214,0 2px 8px #5c4a720a;border:2px solid rgba(255,255,255,.5);transition:all .3s ease}.card:hover{box-shadow:0 12px 48px #5c4a721f,0 4px 12px #5c4a720f}.instructions-card{background:linear-gradient(135deg,#fff5ba4d,#ffffffe6)}.settings-card{background:linear-gradient(135deg,#b5ead74d,#ffffffe6);padding:2.5rem 2rem}.preview-card{background:linear-gradient(135deg,#89b8d433,#ffffffe6)}.instructions{list-style:none;display:flex;flex-direction:column;gap:1rem}.instruction-item{display:flex;align-items:flex-start;gap:1rem;padding:1rem;background:#fff9;border-radius:16px;border-left:4px solid var(--pastel-blue);transition:all .2s ease}.instruction-item:hover{background:#ffffffe6;border-left-color:var(--soft-purple)}.instruction-number{min-width:32px;height:32px;background:linear-gradient(135deg,var(--pastel-blue),var(--pastel-pink));color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1rem;flex-shrink:0;box-shadow:0 4px 12px #89b8d44d}.instruction-content{flex:1;color:var(--text-primary);line-height:1.6}.instruction-content strong{color:var(--soft-purple);font-weight:600}.settings-grid{display:grid;grid-template-columns:1fr;gap:2rem}@media(min-width:768px){.settings-grid{grid-template-columns:1fr 1fr;gap:2.5rem}}.setting-item{display:flex;flex-direction:column;gap:.75rem}.setting-label{font-weight:600;color:var(--text-primary);font-size:.95rem;display:flex;flex-direction:column;gap:.35rem;margin-bottom:.25rem}.setting-hint{font-size:.8rem;font-weight:400;color:var(--text-secondary);font-style:italic}.input-field{padding:.875rem 1.125rem;border:2px solid var(--soft-gray);border-radius:12px;font-size:1rem;font-family:inherit;background:#fff;color:var(--text-primary);transition:all .2s ease;margin-top:.25rem}.input-field:focus{outline:none;border-color:var(--pastel-blue);box-shadow:0 0 0 4px #89b8d41a}.textarea{width:100%;padding:1rem;border:2px solid var(--soft-gray);border-radius:16px;font-family:Courier New,monospace;font-size:1rem;line-height:1.8;resize:vertical;background:#fff;color:var(--text-primary);transition:all .2s ease}.textarea:focus{outline:none;border-color:var(--pastel-blue);box-shadow:0 0 0 4px #89b8d41a}.slider-container{display:flex;align-items:center;gap:1.25rem;padding-top:.25rem}.slider{flex:1;height:10px;border-radius:10px;background:linear-gradient(90deg,var(--pastel-pink) 0%,var(--pastel-blue) 100%);outline:none;-webkit-appearance:none}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:28px;height:28px;border-radius:50%;background:#fff;border:3px solid var(--soft-purple);cursor:pointer;box-shadow:0 3px 10px #5c4a7240;transition:all .2s ease}.slider::-webkit-slider-thumb:hover{transform:scale(1.15);box-shadow:0 4px 14px #5c4a7259}.slider::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:#fff;border:3px solid var(--soft-purple);cursor:pointer;box-shadow:0 3px 10px #5c4a7240;transition:all .2s ease}.slider::-moz-range-thumb:hover{transform:scale(1.15);box-shadow:0 4px 14px #5c4a7259}.slider-value{min-width:48px;padding:.625rem 1.125rem;background:var(--soft-purple);color:#fff;border-radius:12px;font-weight:700;text-align:center;font-size:1.05rem;line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #5c4a7233}.button-group{display:flex;gap:1rem;margin-top:1.5rem;flex-wrap:wrap}.button{padding:.875rem 2rem;border:none;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease;font-family:inherit;display:flex;align-items:center;gap:.5rem;box-shadow:0 4px 12px #0000001a}.button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #00000026}.button:active{transform:translateY(0)}.button-primary{background:linear-gradient(135deg,var(--soft-purple),#7d6b93);color:#fff}.button-primary:hover{background:linear-gradient(135deg,#6e5a84,var(--soft-purple))}.button-secondary{background:linear-gradient(135deg,var(--pastel-blue),#a5cee0);color:#fff}.button-secondary:hover{background:linear-gradient(135deg,#99c4dc,var(--pastel-blue))}.preview-container{display:flex;align-items:flex-start;justify-content:flex-start;padding:2rem;background:var(--soft-gray);border-radius:16px;overflow-x:auto;overflow-y:visible;max-width:100%;min-height:min-content}.preview-container svg{border-radius:12px;box-shadow:0 8px 32px #5c4a721f,0 2px 8px #5c4a720f;flex-shrink:0}.tip{margin-top:1rem;padding:1rem;background:linear-gradient(135deg,#ff9aa21a,#b5ead71a);border-radius:12px;color:var(--text-secondary);font-size:.95rem;border-left:4px solid var(--accent-coral)}.tip strong{color:var(--soft-purple);font-weight:600}::-webkit-scrollbar{width:12px;height:12px}::-webkit-scrollbar-track{background:var(--soft-gray);border-radius:8px}::-webkit-scrollbar-thumb{background:var(--pastel-blue);border-radius:8px;border:2px solid var(--soft-gray)}::-webkit-scrollbar-thumb:hover{background:var(--soft-purple)}.toggle-label{display:flex;align-items:center;gap:.75rem;cursor:pointer;-webkit-user-select:none;user-select:none}.toggle-track-wrapper{position:relative;display:inline-block;width:52px;height:28px;flex-shrink:0}.toggle-input{opacity:0;width:0;height:0;position:absolute}.toggle-track{position:absolute;inset:0;border-radius:28px;background-color:#c8c0d0;transition:background-color .25s ease;box-shadow:inset 0 1px 3px #00000026}.toggle-track.is-on{background-color:var(--soft-purple)}.toggle-thumb{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background-color:#fff;box-shadow:0 2px 6px #5c4a724d;transition:left .25s ease}.toggle-thumb.is-on{left:27px}.toggle-status{font-weight:600;font-size:.95rem;color:var(--text-secondary);transition:color .2s}.toggle-status.is-on{color:var(--soft-purple)}@media(max-width:768px){.title{font-size:2rem}.card{padding:1.5rem}.button-group{flex-direction:column}.button{width:100%;justify-content:center}.preview-container{padding:1rem}}