@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Caveat:wght@500;700&family=Zhi+Mang+Xing&display=swap";:root{--bg-paper:#fdfbf7;--text-ink:#2a2b2e;--accent-primary:#4f46e5;--accent-secondary:#7c3aed;--text-secondary:#64748b;--glass-border:#0000000f;--glass-shadow:0 8px 32px 0 #00000014}*{box-sizing:border-box;-webkit-user-select:none;user-select:none;margin:0;padding:0}body{background-color:var(--bg-paper);color:var(--text-ink);overscroll-behavior:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.08'/%3E%3C/svg%3E");flex-direction:column;min-height:100dvh;font-family:Inter,sans-serif;display:flex;overflow:hidden}.app-container{flex-direction:column;width:100vw;height:100dvh;display:flex;position:relative;overflow:hidden}.text-container{flex-shrink:0;justify-content:center;align-items:center;width:100%;min-height:160px;max-height:35vh;padding:1.5rem;display:flex;overflow-y:auto}.ai-response-text{max-width:800px;color:var(--text-ink);text-align:center;-webkit-backdrop-filter:blur(12px);background:#fdfbf7d9;border-radius:2rem;padding:1.5rem 2.5rem;font-size:1.25rem;font-weight:500;line-height:1.6;box-shadow:0 10px 40px #00000014,inset 0 0 0 1px #ffffff80}.hint-text{color:#0003;pointer-events:none;font-size:2.5rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.loading-indicator{color:var(--accent-primary);font-family:Caveat,Zhi Mang Xing,cursive;font-size:2.5rem;animation:1.5s infinite pulse}@keyframes pulse{0%,to{opacity:.6}50%{opacity:1}}.ink-container{border:1px solid var(--glass-border);background:#ffffff4d;border-radius:12px;flex:1;margin:0 1.5rem;position:relative;overflow:hidden;box-shadow:inset 0 2px 10px #00000008}svg.drawing-surface{cursor:crosshair;touch-action:none;width:100%;height:100%;position:absolute;top:0;left:0}svg.drawing-surface.hidden{display:none}.result-image-view{object-fit:contain;width:100%;height:100%;position:absolute;top:0;left:0}.controls-bar{-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);z-index:20;background:#fff9;border-radius:9999px;flex-wrap:wrap;flex-shrink:0;justify-content:center;align-items:center;gap:1rem;margin:1.5rem;padding:1.5rem;display:flex}.btn{cursor:pointer;border:none;border-radius:9999px;flex:auto;justify-content:center;align-items:center;gap:.5rem;min-width:120px;padding:.75rem 1.5rem;font-family:inherit;font-size:.95rem;font-weight:600;transition:all .2s;display:flex}.btn-secondary{color:var(--text-ink);background:0 0}.btn-secondary:hover{background:#0000000a}.btn-primary{background:linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));color:#fff;box-shadow:0 4px 12px #6366f14d}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 16px #6366f166}.btn-primary:active{transform:translateY(1px)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn.processing{animation:1.5s infinite pulse-bg}@keyframes pulse-bg{0%{box-shadow:0 0 #6366f1b3}70%{box-shadow:0 0 0 10px #6366f100}to{box-shadow:0 0 #6366f100}}@media (width<=768px){.controls-bar{border-radius:1.5rem;gap:.5rem;margin:1rem;padding:1rem}.ink-container{margin:0 1rem}.btn{min-width:100px;padding:.6rem 1rem;font-size:.85rem}}.mobile-container{flex-direction:column;width:100vw;height:100dvh;padding:0;display:flex;position:relative;overflow:hidden}.mobile-container .text-container{flex-shrink:0;justify-content:flex-start;align-items:flex-start;min-height:100px;max-height:25vh;padding:1rem;overflow-y:auto}.mobile-container .ink-container{border:1px solid var(--glass-border);background:#ffffff4d;border-radius:12px;flex:1;min-height:40vh;margin:0 1rem;position:relative;overflow:hidden;box-shadow:inset 0 2px 10px #00000008}.mobile-container .controls-bar{-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);background:#fff9;border-radius:1.5rem;flex-wrap:wrap;flex-shrink:0;justify-content:center;align-items:center;gap:.5rem;margin:1rem;padding:1rem;display:flex}.mobile-container .btn{flex:calc(50% - .25rem);min-width:0;padding:.6rem 1rem;font-size:.85rem}@media (width<=1023px) and (orientation:landscape){.mobile-container{grid-template:"text ink"1fr"controls ink"/40% 1fr;gap:.5rem;padding:.5rem;display:grid}.mobile-container .text-container{grid-area:text;padding:0}.mobile-container .ink-container{grid-area:ink;margin:0}.mobile-container .controls-bar{grid-area:controls;margin:0;padding:.5rem}}.desktop-container{grid-template:"text ink"1fr"controls ink"/35% 1fr;gap:2rem;width:100vw;height:100dvh;padding:2rem;display:grid;position:relative;overflow:hidden}.desktop-container .text-container{flex-direction:column;grid-area:text;justify-content:flex-start;display:flex;overflow-y:auto}.desktop-container .ink-container{border:1px solid var(--glass-border);background:#ffffff4d;border-radius:12px;grid-area:ink;position:relative;overflow:hidden;box-shadow:inset 0 2px 10px #00000008}.desktop-container .controls-bar{-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);background:#fff9;border-radius:1.5rem;flex-wrap:wrap;grid-area:controls;justify-content:center;align-items:center;gap:1rem;padding:1.5rem;display:flex}.desktop-container .btn{flex:calc(50% - .5rem);padding:.75rem 1.5rem;font-size:.95rem}.center-loader{color:#000;pointer-events:none;z-index:10;font-size:2.5rem;font-weight:700;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}