.app-container{position:relative;width:100%;height:100vh;height:100dvh;overflow:hidden;background:#241a12;color:#fff}.canvas-wrapper{position:absolute;inset:0;touch-action:none;overscroll-behavior:contain}.top-gradient{pointer-events:none;position:absolute;left:0;right:0;top:0;height:7rem;background:linear-gradient(to bottom,rgba(0,0,0,.45),transparent)}.app-header{pointer-events:none;position:absolute;left:1rem;top:1rem;z-index:10}.header-content{display:flex;align-items:center;gap:.75rem}.logo{display:flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border-radius:1.25rem;background:linear-gradient(to bottom right,#facc15,#f8cdda);color:#171717;box-shadow:0 4px 6px #0003}.app-title{font-size:1.25rem;font-weight:700;line-height:1.2}.app-subtitle{font-size:.875rem;color:#fff5}.interaction-hint{position:absolute;bottom:1rem;left:50%;z-index:10;display:none;align-items:center;gap:1rem;padding:.625rem 1.25rem;font-size:.75rem;color:#fff;border-radius:9999px;background:#00000078}@media (min-width: 768px){.interaction-hint{display:flex}}.hint-dot{width:.25rem;height:.25rem;border-radius:9999px;background:#ffffff4d}.hint-icon{width:.875rem;height:.875rem;color:#fbbf24}.icon{width:1.5rem;height:1.5rem}.text-amber-200{color:#fcd34d}.text-neutral-400{color:#9ca3af}.control-panel{position:fixed;z-index:20;background:#111113db;box-shadow:0 -10px 40px #00000059;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);left:0;right:0;bottom:0;height:92dvh;border-radius:1.5rem 1.5rem 0 0;border:1px solid rgba(255,255,255,.1);border-bottom:none;display:flex;flex-direction:column;padding:0;padding-bottom:env(safe-area-inset-bottom);transform:translateY(100%);transition:transform .32s cubic-bezier(.32,.72,0,1);visibility:hidden}.sheet-closed{transform:translateY(100%);visibility:hidden}.sheet-peek{transform:translateY(calc(100% - 40dvh));visibility:visible}.sheet-full{transform:translateY(0);visibility:visible}.sheet-dragging{transition:none}.sheet-grip{flex:0 0 auto;display:flex;align-items:center;justify-content:center;height:1.5rem;padding-top:.375rem;cursor:grab;touch-action:none}.sheet-grip-bar{display:block;width:2.75rem;height:.3125rem;border-radius:9999px;background:#ffffff47}.panel-scroll{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:.25rem 1rem calc(5.5rem + env(safe-area-inset-bottom));scrollbar-width:thin}.sheet-scrim{position:fixed;inset:0;z-index:19;background:#0c080573;opacity:0;pointer-events:none;transition:opacity .24s ease}.sheet-scrim-on{opacity:1;pointer-events:auto}.sheet-close{position:absolute;top:.375rem;right:.5rem;z-index:2;display:flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border-radius:9999px;border:none;background:#ffffff12;color:#fff;cursor:pointer;touch-action:manipulation}.sheet-close:active{background:#ffffff29}@media (min-width: 768px){.sheet-close{display:none}}@media (min-width: 768px){.control-panel,.control-panel.sheet-closed,.control-panel.sheet-peek,.control-panel.sheet-full{transform:translateY(-50%);height:auto;max-height:calc(100dvh - 2rem);visibility:visible}.control-panel{left:auto;right:1rem;top:50%;bottom:auto;height:auto;max-height:calc(100vh - 2rem);width:352px;transform:translateY(-50%);border-radius:1.25rem;border-bottom:1px solid rgba(255,255,255,.1);padding:1rem;overflow-y:auto;visibility:visible!important;background:#111113b8;display:block}.sheet-grip,.sheet-scrim{display:none}.panel-scroll{overflow:visible;padding:0}}.panel-header{display:flex;align-items:center;gap:.625rem;padding-bottom:.75rem}.panel-logo{display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:.625rem;background:linear-gradient(to bottom right,#facc15,#f8cdda);color:#171717;box-shadow:0 2px 4px #0003}.panel-title{font-size:1rem;font-weight:600;line-height:1.2;color:#fff}.panel-subtitle{font-size:.75rem;color:#9ca3af}.divider{height:1px;width:100%;background:#ffffff1a;margin:.75rem 0}.section-title{display:flex;align-items:center;gap:.5rem;padding:.25rem .25rem .75rem;font-size:.625rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:#fcd34d}.section-icon{width:.875rem;height:.875rem}.section-collapse{display:flex;align-items:center;justify-content:space-between;width:100%;padding:.25rem .25rem .5rem;background:transparent;border:none;cursor:pointer}.section-collapse-inner{display:flex;align-items:center;gap:.5rem;font-size:.625rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:#fcd34d}.section-collapse:hover .section-collapse-inner{color:#fde68a}.collapse-chevron{color:#fcd34d;transition:transform .2s}.collapse-chevron.closed{transform:rotate(-90deg)}.icon-sm{width:1rem;height:1rem}.preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:.75rem}.preset-btn{text-align:left;border:1px solid rgba(255,255,255,.1);border-radius:.625rem;background:#ffffff05;padding:.625rem .875rem;font-size:.8125rem;color:#fff;transition:border-color .2s,background-color .2s}.preset-btn:hover{border-color:#fcd34d66;background:#ffffff0d}.preset-name{font-size:.8125rem;font-weight:500;color:#fff}.preset-desc{margin-top:.125rem;font-size:.6875rem;line-height:1.2;color:#9ca3af}.flavor-grid{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.75rem}.flavor-btn{display:inline-flex;align-items:center;gap:.5rem;border:1px solid rgba(255,255,255,.1);border-radius:9999px;padding:.375rem .875rem;font-size:.8125rem;cursor:pointer;transition:all .2s}.flavor-active{border-color:#fcd34d99;background:#fcd34d26;color:#fff}.flavor-inactive{background:#ffffff05;color:#9ca3af}.flavor-inactive:hover{background:#ffffff1a;color:#fff}.flavor-color{width:1.25rem;height:1.25rem;border-radius:9999px;border:1px solid rgba(0,0,0,.2)}.swatch-grid{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.75rem}.swatch{width:2.25rem;height:2.25rem;border-radius:.5rem;border:2px solid rgba(255,255,255,.2);box-shadow:0 1px 3px #0003;cursor:pointer;transition:transform .15s}.swatch-active{transform:scale(1.1);border-width:3px;border-color:#fcd34d;box-shadow:0 0 0 2px #fcd34d4d}.swatch-inactive:hover{transform:scale(1.08);border-color:#fff6}.custom-swatch{position:relative;display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:.5rem;border:1px solid rgba(255,255,255,.25);background:linear-gradient(135deg,#f87171,#fbbf24,#34d399);cursor:pointer;transition:transform .2s}.custom-swatch:hover{transform:scale(1.08)}.plus-icon{width:1rem;height:1rem;color:#171717;drop-shadow:0 1px 1px rgba(0,0,0,.3)}.color-input{position:absolute;inset:0;width:100%;height:100%;cursor:pointer;opacity:0}.toggle-row{display:flex;align-items:center;justify-content:space-between;background:#0000001a;margin:.5rem 0;padding:.5rem;border-radius:.375rem}.toggle-label{font-size:.875rem;color:#d4d4d8}.toggle-desc{padding:0 .5rem;font-size:.6875rem;line-height:1.2;color:#717182}.toggle-switch{position:relative;display:inline-block;width:3rem;height:1.5rem}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;inset:0;background:#ffffff26;border-radius:9999px;transition:.3s}.toggle-slider:before{content:"";position:absolute;height:1.25rem;width:1.25rem;left:.125rem;bottom:.125rem;background:#fff;border-radius:50%;transition:.3s}.toggle-switch input:checked+.toggle-slider{background:#facc15}.toggle-switch input:checked+.toggle-slider:before{transform:translate(1.5rem)}.segmented{display:flex;flex-wrap:wrap;gap:.25rem;border-radius:.625rem;background:#ffffff0d;padding:.25rem}.segmented-option{flex:1 1 auto;white-space:nowrap;border-radius:.375rem;padding:.5rem .75rem;font-size:.8125rem;font-weight:500;transition:all .2s}.segmented-active{background:#fcd34d;color:#171717;box-shadow:0 1px 2px #0000001a}.segmented-inactive{color:#9ca3af}.segmented-inactive:hover{background:#ffffff1a;color:#fff}.control-label{font-size:.875rem;padding-bottom:.375rem}.mt-3{margin-top:.75rem}.mt-2{margin-top:.5rem}.px-1{padding-left:.25rem;padding-right:.25rem}.clear-btn{width:100%;margin-top:.25rem;padding:.5rem .75rem;border-radius:.5rem;border:1px solid rgba(248,113,113,.35);background:#f871711f;color:#fca5a5;font-size:.8125rem;font-weight:500;cursor:pointer;transition:all .2s}.clear-btn:hover:not(:disabled){background:#f8717138}.clear-btn:disabled{opacity:.4;cursor:default}.candle-row{display:flex;align-items:center;justify-content:space-between;padding-bottom:.5rem}.candle-count{font-size:.875rem;font-weight:500;color:#fcd34d}.slider{width:100%;height:.25rem;-webkit-appearance:none;background:#434350;border-radius:.25rem;outline:none}.slider::-webkit-slider-thumb{-webkit-appearance:none;width:1.125rem;height:1.125rem;border-radius:50%;background:#fcd34d;cursor:pointer;box-shadow:0 2px 6px #0003}.actions{margin-top:.75rem;display:flex;flex-direction:column;gap:.5rem}.action-btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;width:100%;height:2.75rem;border-radius:.5rem;font-size:.9375rem;font-weight:600;box-shadow:0 4px 12px #00000026;cursor:pointer;border:none;transition:all .2s}.action-blow{background:linear-gradient(135deg,#fcd34d,#fcd34d);color:#171717}.action-blow:hover{background:linear-gradient(135deg,#fbbf24,#fbbf24)}.action-relight{background:linear-gradient(135deg,#f87171,#dc2626);color:#fff}.action-relight:hover{background:linear-gradient(135deg,#fca5a5,#dc2626)}.action-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.action-btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;height:2.75rem;border-radius:.5rem;font-size:.875rem;font-weight:500;background:#ffffff1a;color:#fff;border:none;cursor:pointer;transition:all .2s}.action-btn-secondary:hover{background:#fff3}.mobile-toggle{position:fixed;right:.75rem;bottom:calc(.75rem + env(safe-area-inset-bottom));z-index:30;display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;padding:.75rem 1.25rem;border-radius:9999px;border:1px solid rgba(255,255,255,.15);background:#111113db;color:#fff;font-size:.875rem;font-weight:600;box-shadow:0 10px 25px #00000047;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);cursor:pointer;transition:background-color .2s,opacity .2s,transform .2s;touch-action:manipulation}.mobile-toggle:active{transform:scale(.97)}.mobile-toggle:hover{background:#1e1e28e6}.mobile-toggle-hidden{opacity:0;pointer-events:none}.mobile-toggle-close{bottom:1rem;left:1rem}@media (min-width: 768px){.mobile-toggle{display:none}}.design-actions{position:fixed;left:1rem;bottom:1rem;z-index:25;display:flex;gap:.5rem}.action-button{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem .75rem;border-radius:9999px;border:1px solid rgba(255,255,255,.14);background:#1c140eb8;color:#f6eee2;font-size:.75rem;font-weight:500;letter-spacing:.01em;backdrop-filter:blur(10px);cursor:pointer;transition:background .16s ease,border-color .16s ease,transform .16s ease}.action-button:hover{background:#342518e6;border-color:#fcd34d73}.action-button:active{transform:translateY(1px)}.action-button:focus-visible{outline:2px solid #fcd34d;outline-offset:2px}.toast{position:fixed;left:1rem;bottom:3.75rem;z-index:26;display:inline-flex;align-items:center;gap:.375rem;padding:.5rem .75rem;border-radius:.75rem;background:#fcd34df0;color:#1c1206;font-size:.75rem;font-weight:600;box-shadow:0 8px 24px #00000059}@media (max-width: 767px){.design-actions{left:.75rem;right:.75rem;bottom:calc(.75rem + env(safe-area-inset-bottom));top:auto;justify-content:flex-start;pointer-events:none}.design-actions>*{pointer-events:auto}.action-button{min-height:2.75rem;padding:.5rem .9375rem;font-size:.8125rem}.toast{left:.75rem;right:auto;bottom:calc(4.25rem + env(safe-area-inset-bottom));top:auto}.mobile-toggle{right:.75rem}.design-actions{right:10.75rem;flex-wrap:nowrap}body.sheet-open .design-actions,body.sheet-open .mobile-toggle{opacity:0;pointer-events:none;transform:translateY(.75rem)}}body.effects-off .canvas-wrapper:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 46%,transparent 46%,rgba(46,40,32,.28) 100%)}@media (max-width: 767px){.app-header{left:.875rem;top:calc(.875rem + env(safe-area-inset-top))}.app-title{font-size:1.0625rem}.app-subtitle{display:none}.logo{width:2.5rem;height:2.5rem;border-radius:1rem}.swatch,.custom-swatch{width:2.75rem;height:2.75rem}.swatch-grid{gap:.5625rem}.flavor-btn{min-height:2.75rem;padding:.5rem 1rem}.segmented{gap:.3125rem}.segmented-option{min-height:2.75rem;padding:.625rem .75rem;font-size:.875rem}.preset-btn{padding:.75rem .875rem;min-height:3.25rem}.toggle-row{padding:.625rem;min-height:3.25rem}.toggle-label{font-size:.9375rem}.toggle-switch{width:3.25rem;height:1.875rem;flex:0 0 auto}.toggle-switch:after{content:"";position:absolute;inset:-.5rem -.375rem}.toggle-slider:before{height:1.5rem;width:1.5rem}.toggle-switch input:checked+.toggle-slider:before{transform:translate(1.375rem)}.action-btn-primary,.action-btn-secondary{height:3rem;font-size:1rem}.clear-btn{min-height:2.75rem;font-size:.875rem}.slider{height:.375rem}.slider::-webkit-slider-thumb{width:1.5rem;height:1.5rem}.control-label{font-size:.9375rem}.section-collapse{min-height:2.75rem}.panel-title{font-size:1.0625rem}button,.swatch,.segmented-option,.preset-btn,.flavor-btn{touch-action:manipulation;-webkit-tap-highlight-color:transparent}}@media (max-width: 380px){.mobile-toggle{width:2.75rem;padding:.75rem 0;justify-content:center}.mobile-toggle-text{display:none}.design-actions{right:4.75rem}.action-button{padding:.5rem .75rem}}@media (hover: none){.preset-btn:hover{border-color:#ffffff1a;background:#ffffff05}.flavor-inactive:hover{background:#ffffff05;color:#9ca3af}.swatch-inactive:hover{transform:none;border-color:#fff3}.segmented-inactive:hover{background:transparent;color:#9ca3af}.action-button:hover{background:#1c140eb8;border-color:#ffffff24}.mobile-toggle:hover{background:#111113db}.action-btn-secondary:hover{background:#ffffff1a}}.mobile-hint{position:fixed;left:50%;transform:translate(-50%);bottom:calc(4.75rem + env(safe-area-inset-bottom));z-index:22;padding:.5rem .875rem;border-radius:9999px;background:#0c08059e;color:#fff;font-size:.75rem;letter-spacing:.01em;pointer-events:none;animation:hint-fade 5.2s ease forwards}@keyframes hint-fade{0%,70%{opacity:1}to{opacity:0}}@media (min-width: 768px){.mobile-hint{display:none}}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;width:100%;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;overflow:hidden;background:linear-gradient(135deg,#667eea,#764ba2)}