:root{--primary-bg:#f8f5f2;--ink-black:#1a1a1a;--glass-bg:#ffffffbf;--glass-border:#ffffff80;--accent-color:#2c3e50;--text-color:#1a1a1a;--font-main:"Outfit", sans-serif;--shadow-premium:0 10px 40px -10px #0000001a;--safe-top:env(safe-area-inset-top);--safe-bottom:env(safe-area-inset-bottom)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;margin:0;padding:0}body{font-family:var(--font-main);background-color:var(--primary-bg);color:var(--text-color);overscroll-behavior:none;width:100vw;height:100dvh;position:fixed;overflow:hidden}body:before{content:"";opacity:.5;pointer-events:none;z-index:1;background-image:url(https://www.transparenttextures.com/patterns/natural-paper.png);width:100%;height:100%;position:fixed;top:0;left:0}#app{z-index:2;width:100%;height:100%;position:relative}#canvas-container{width:100%;height:100%;position:absolute;top:0;left:0}#ui-layer{pointer-events:none;width:100%;height:100%;padding:20px;padding-top:calc(20px + var(--safe-top));padding-bottom:calc(20px + var(--safe-bottom));flex-direction:column;justify-content:space-between;transition:opacity .5s cubic-bezier(.4,0,.2,1),transform .5s cubic-bezier(.4,0,.2,1);display:flex;position:absolute;top:0;left:0}#ui-layer.hidden{opacity:0;pointer-events:none;transform:translateY(10px);display:flex!important}#ui-layer.hidden *{pointer-events:none!important}.glass-panel{background:var(--glass-bg);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);box-shadow:var(--shadow-premium);pointer-events:auto;border-radius:28px;justify-content:space-between;align-items:center;padding:20px 28px;display:flex}.top-bar{margin-bottom:auto}.brand{flex-direction:column;display:flex}.top-bar h1{letter-spacing:-.03em;font-size:1.4rem;font-weight:600;line-height:1.1}.status-badge{text-transform:uppercase;letter-spacing:.1em;opacity:.5;font-size:.65rem;font-weight:600}.bottom-bar{flex-direction:column;align-items:stretch;gap:20px;margin-top:auto}.control-group{flex-direction:column;gap:10px;display:flex}.control-group label{text-transform:uppercase;letter-spacing:.08em;opacity:.4;font-size:.7rem;font-weight:600}.slider-container{align-items:center;gap:15px;display:flex}#size-val{font-variant-numeric:tabular-nums;min-width:45px;font-size:.9rem;font-weight:600}input[type=range]{-webkit-appearance:none;background:0 0;flex:1;height:24px}input[type=range]::-webkit-slider-runnable-track{background:#00000014;border-radius:2px;width:100%;height:4px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--ink-black);cursor:pointer;border:4px solid #fff;border-radius:50%;width:24px;height:24px;margin-top:-10px;transition:transform .2s;box-shadow:0 4px 12px #00000026}input[type=range]:active::-webkit-slider-thumb{transform:scale(1.2)}.color-picker{scrollbar-width:none;gap:12px;margin:-12px -8px;padding:12px 8px;display:flex;overflow-x:auto}.color-picker::-webkit-scrollbar{display:none}.color-opt{cursor:pointer;border:3px solid #0000;border-radius:50%;flex-shrink:0;width:32px;height:32px;transition:all .2s cubic-bezier(.175,.885,.32,1.275);box-shadow:inset 0 0 0 1px #0000000d}.color-opt.active{border-color:#fff;transform:scale(1.2);box-shadow:0 4px 15px #0000001a}.primary-btn{background:var(--ink-black);color:#fff;cursor:pointer;border:none;border-radius:24px;padding:18px 36px;font-family:inherit;font-size:1.1rem;font-weight:600;transition:transform .2s,background .2s}.primary-btn-sm{background:var(--ink-black);color:#fff;cursor:pointer;border:none;border-radius:14px;justify-content:center;align-items:center;padding:10px 20px;font-family:inherit;font-size:.85rem;font-weight:600;transition:transform .2s;display:flex}.primary-btn:active,.primary-btn-sm:active{transform:scale(.95)}.actions{align-items:center;gap:8px;display:flex}.icon-btn{cursor:pointer;width:36px;height:36px;color:var(--ink-black);background:#0000000d;border:none;border-radius:10px;justify-content:center;align-items:center;transition:all .2s;display:flex}.icon-btn:active{background:#0000001a;transform:scale(.9)}.icon-btn svg{opacity:.7}.icon-btn:hover svg{opacity:1}.text-btn{cursor:pointer;color:var(--ink-black);background:#0000000d;border:none;border-radius:14px;align-items:center;gap:8px;padding:10px 20px;font-family:inherit;font-size:.85rem;font-weight:600;transition:all .2s;display:flex}.text-btn:active{background:#0000001a;transform:scale(.95)}.text-btn svg{opacity:.7}.text-btn:hover svg{opacity:1}#guide-overlay{pointer-events:none;z-index:10;transition:opacity .5s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.guide-toast{color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);letter-spacing:.02em;background:#0009;border-radius:30px;padding:12px 24px;font-size:1rem;font-weight:400;animation:2s infinite pulse}@keyframes pulse{0%{opacity:.8;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}to{opacity:.8;transform:scale(1)}}#pause-indicator{z-index:2000;pointer-events:none;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.pause-icon{background:#00000080;border-radius:50%;padding:30px;animation:.5s fadeInOut}.overlay{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:10000;pointer-events:auto;background:#0000004d;justify-content:center;align-items:center;width:100%;height:100%;padding:24px;display:flex;position:fixed;top:0;left:0}.intro-card{text-align:center;flex-direction:column;gap:16px;max-width:360px;padding:48px 32px}.intro-card h2{margin-bottom:8px;font-size:2rem}.intro-card p{opacity:.7;font-size:1.05rem;line-height:1.6}.hidden{display:none!important}.invisible{opacity:0;pointer-events:none}@keyframes fadeInOut{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@media (width<=480px){.glass-panel{padding:16px 20px}}