:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;padding:0;min-height:100vh;width:100%;overflow-x:hidden;-webkit-overflow-scrolling:touch;background:linear-gradient(135deg,#1e1e2e,#2d2d44)}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547}a:hover{color:#747bff}button{background-color:#f9f9f9}}@media (max-width: 768px){body{min-width:auto;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}h1{font-size:2.5em}}@supports (-webkit-touch-callout: none){body{min-height:-webkit-fill-available}}@media (max-width: 480px){body{position:relative;overflow-x:hidden}#root{width:100%;min-height:100vh}}*{box-sizing:border-box;margin:0;padding:0}body{background:#1e1e2e;color:#cdd6f4;font-family:Inter,sans-serif;overflow-x:hidden;min-height:100vh}.App{width:100%;min-height:100vh;padding:clamp(20px,5vw,40px) clamp(10px,3vw,20px);display:flex;flex-direction:column;align-items:center;gap:clamp(25px,5vw,40px)}header{text-align:center;width:100%;max-width:800px;margin-bottom:10px}h1{font-size:clamp(2rem,7vw,3rem);color:#cba6f7;margin-bottom:15px;font-weight:700;text-shadow:0 2px 10px rgba(203,166,247,.3);background:linear-gradient(135deg,#cba6f7,#f5c2e7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}header p{font-size:clamp(1rem,3.5vw,1.2rem);color:#a6adc8;font-weight:400;line-height:1.5}.controls{display:flex;flex-direction:column;gap:20px;background:linear-gradient(135deg,#24283b,#2a2e45);padding:25px;border-radius:16px;width:100%;max-width:800px;box-shadow:0 8px 32px #0000004d;border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.control-group{display:flex;flex-direction:column;gap:10px;width:100%}label{font-size:clamp(.95rem,3vw,1.1rem);color:#cdd6f4;font-weight:600;margin-bottom:5px}select{padding:12px 16px;background:linear-gradient(135deg,#2a2e45,#3a3a5c);color:#cdd6f4;border:2px solid #45475a;border-radius:10px;font-size:clamp(.9rem,3vw,1rem);width:100%;transition:all .3s ease;cursor:pointer}select:focus{outline:none;border-color:#cba6f7;box-shadow:0 0 0 3px #cba6f733;transform:translateY(-1px)}select:hover{border-color:#cba6f7;transform:translateY(-1px)}.checkbox-container{display:flex;align-items:center;gap:12px;cursor:pointer;padding:8px 0}.checkbox-container input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border:2px solid #45475a;border-radius:6px;background:linear-gradient(135deg,#2a2e45,#3a3a5c);cursor:pointer;position:relative;transition:all .3s ease}.checkbox-container input[type=checkbox]:checked{background:linear-gradient(135deg,#cba6f7,#f5c2e7);border-color:#cba6f7}.checkbox-container input[type=checkbox]:checked:after{content:"✓";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#1e1e2e;font-weight:700;font-size:12px}.checkbox-container input[type=checkbox]:hover{border-color:#cba6f7;transform:scale(1.05)}.checkbox-container label{margin:0;cursor:pointer;-webkit-user-select:none;user-select:none}.preview{text-align:center;background:linear-gradient(135deg,#24283b,#2a2e45);padding:30px;border-radius:16px;width:100%;max-width:800px;overflow-x:auto;box-shadow:0 8px 32px #0000004d;border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:relative}.preview h2{font-size:clamp(1.3rem,4vw,1.6rem);color:#cba6f7;margin-bottom:20px;font-weight:600}.preview img{display:block;max-width:100%;height:auto;margin:0 auto;border-radius:12px;box-shadow:0 4px 20px #0003;transition:all .3s ease;overflow:visible;object-fit:contain}.preview img:hover{transform:scale(1.02);box-shadow:0 8px 30px #0000004d}.markdown{background:linear-gradient(135deg,#24283b,#2a2e45);padding:30px;border-radius:16px;width:100%;max-width:800px;text-align:center;box-shadow:0 8px 32px #0000004d;border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.markdown h2{font-size:clamp(1.3rem,4vw,1.6rem);color:#cba6f7;margin-bottom:20px;font-weight:600}pre{background:linear-gradient(135deg,#1e1e2e,#2a2e45);padding:20px;border-radius:12px;color:#cdd6f4;font-family:Fira Code,monospace;white-space:pre-wrap;word-wrap:break-word;overflow-x:auto;font-size:clamp(.85rem,2.5vw,1rem);border:1px solid #45475a;margin-bottom:20px;box-shadow:inset 0 2px 10px #0003}button{background:linear-gradient(135deg,#f5c2e7,#cba6f7);color:#1e1e2e;padding:14px 28px;border:none;border-radius:12px;font-size:clamp(.95rem,3vw,1.1rem);cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #f5c2e74d;font-weight:600;margin-top:15px;position:relative;overflow:hidden}button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}button:hover:before{left:100%}button:hover{background:linear-gradient(135deg,#cba6f7,#f5c2e7);transform:translateY(-3px);box-shadow:0 8px 25px #f5c2e766}button:active{transform:translateY(-1px);box-shadow:0 4px 15px #f5c2e74d}.copy-success{background:linear-gradient(135deg,#a7f3d0,#6ee7b7)!important;color:#064e3b!important}.share-buttons{display:flex;gap:1rem;margin-top:1.5rem;justify-content:center}.share-buttons button{background:transparent;border:none;padding:0;margin:0;box-shadow:none;transform:none;font-weight:400;border-radius:50%;transition:transform .3s ease}.share-buttons button:hover{background:transparent;transform:scale(1.1);box-shadow:none}footer{text-align:center;margin-top:clamp(30px,5vw,50px);width:100%;max-width:800px;padding:20px 0}footer p{font-size:clamp(.9rem,3vw,1rem);color:#a6adc8;line-height:1.6}a{color:#cba6f7;text-decoration:none;transition:all .3s ease;position:relative}a:after{content:"";position:absolute;width:0;height:2px;bottom:-2px;left:0;background:linear-gradient(135deg,#cba6f7,#f5c2e7);transition:width .3s ease}a:hover:after{width:100%}a:hover{color:#f5c2e7;text-decoration:none}.spinner-container{display:flex;justify-content:center;align-items:center;min-height:250px;flex-direction:column;gap:15px}.spinner-container:after{content:"Generating your haiku...";color:#a6adc8;font-size:1rem;font-weight:500}.hide-haiku{max-height:1px;visibility:hidden}.error-message{background:linear-gradient(135deg,#2d2d44,#3a3a5c);color:#cdd6f4;padding:25px;border-radius:16px;text-align:center;margin:20px 0;box-shadow:0 8px 32px #0006;border:1px solid #4a4a6a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:slideIn .3s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.error-message p{margin:0 0 20px;font-size:1.1rem;font-weight:500;line-height:1.5;color:#f5c2e7}@media (min-width: 768px){.controls{flex-direction:row;flex-wrap:wrap;justify-content:space-between;gap:25px;padding:30px}.control-group{width:clamp(180px,25%,220px)}.preview,.markdown{padding:35px}}@media (min-width: 1024px){.App{gap:clamp(30px,4vw,50px)}.controls,.preview,.markdown{max-width:900px}}@media (max-width: 768px){.error-message{padding:20px;margin:15px 0}.error-message p{font-size:1rem}.error-message button{padding:12px 24px;font-size:.95rem}.checkbox-container{gap:10px}.checkbox-container input[type=checkbox]{width:18px;height:18px}.preview img{border-radius:0}}