:root{--bg: #0f1115;--card-bg: #171a21;--accent: #3ddc97;--accent-dark: #2bb37c;--text: #e8e8ea;--text-dim: #9ca0ab;--border: #262a33;--error: #ff6b6b}*{box-sizing:border-box}body{margin:0;font-family:Cairo,sans-serif;background:radial-gradient(circle at top,#1b1f27 0%,var(--bg) 60%);color:var(--text);min-height:100vh}.page{display:flex;justify-content:center;align-items:flex-start;padding:48px 16px;min-height:100vh}.card{width:100%;max-width:620px;background:var(--card-bg);border:1px solid var(--border);border-radius:16px;padding:32px;box-shadow:0 20px 60px #00000059}header{text-align:center;margin-bottom:28px}h1{margin:0;font-size:2rem;letter-spacing:2px;background:linear-gradient(90deg,var(--accent),#5eead4);-webkit-background-clip:text;background-clip:text;color:transparent}.subtitle{color:var(--text-dim);margin-top:6px;font-size:.95rem}.field-label{display:block;margin-bottom:8px;font-weight:600;color:var(--text-dim);font-size:.9rem}textarea{width:100%;background:#10131a;border:1px solid var(--border);border-radius:10px;padding:14px;color:var(--text);font-family:inherit;font-size:1rem;resize:vertical}textarea:focus{outline:none;border-color:var(--accent)}.examples{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}.example-chip{background:#1d222c;border:1px solid var(--border);color:var(--text-dim);border-radius:999px;padding:6px 14px;font-size:.85rem;font-family:inherit;cursor:pointer;transition:all .15s ease}.example-chip:hover{border-color:var(--accent);color:var(--text)}.controls{margin:20px 0 8px}.controls label{font-size:.9rem;color:var(--text-dim)}input[type=range]{width:100%;accent-color:var(--accent);margin-top:8px}.generate-btn{width:100%;margin-top:20px;padding:14px;border:none;border-radius:10px;background:var(--accent);color:#06231a;font-weight:700;font-size:1rem;font-family:inherit;cursor:pointer;transition:background .15s ease}.generate-btn:hover:not(:disabled){background:var(--accent-dark)}.generate-btn:disabled{opacity:.6;cursor:wait}.error{margin-top:16px;color:var(--error);background:#ff6b6b14;border:1px solid rgba(255,107,107,.3);border-radius:10px;padding:10px 14px;font-size:.9rem}.output{margin-top:24px;background:#10131a;border:1px solid var(--border);border-radius:10px;padding:18px}.output h2{margin:0 0 8px;font-size:.85rem;color:var(--text-dim);font-weight:600}.output p{margin:0;font-size:1.15rem;line-height:1.9}.note{margin-top:20px;font-size:.8rem;color:var(--text-dim);text-align:center}