body { font-family: Arial, sans-serif; margin:0; padding:0; background:#f5f5f5; }
.container { max-width:1200px; margin:0 auto; padding:20px; }
header { text-align:center; margin-bottom:20px; }
.main-layout { display:flex; flex-wrap:wrap; gap:20px; }
.input-panel { flex:1 1 500px; display:flex; flex-direction:column; gap:20px; }
.function-block { background:#fff; padding:15px; border-radius:10px; box-shadow:0 2px 6px rgba(0,0,0,0.1); }
.function-block h3 { margin-top:0; }
.function-block input { width:100%; padding:8px; margin:5px 0; }
.function-block button { padding:10px 15px; margin-top:5px; cursor:pointer; background:#007BFF; color:#fff; border:none; border-radius:5px; }
.function-block button:hover { background:#0056b3; }
.preview-area { margin-top:10px; min-height:50px; background:#eee; display:flex; justify-content:center; align-items:center; border-radius:5px; overflow:hidden; }
.result-panel { flex:1 1 400px; background:#fff; padding:15px; border-radius:10px; box-shadow:0 2px 6px rgba(0,0,0,0.1); }
.status-message { margin-top:15px; font-weight:bold; }