*{box-sizing:border-box}html,body,#root{height:100%;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;color:#222;background:#fff}.app{display:flex;flex-direction:column;height:100%}.app-header{padding:12px 20px;border-bottom:1px solid #e0e0e0;display:flex;align-items:center;gap:24px}.app-header h1{margin:0;font-size:18px;font-weight:600}.controls{display:flex;align-items:center;gap:16px;flex:1}.controls-selects,.controls-actions{display:flex;align-items:center;gap:16px}.controls label{font-size:14px}.controls select,.controls button{font-size:14px;padding:4px 10px;border:1px solid #bdbdbd;border-radius:4px;background:#fff;cursor:pointer}.controls button:hover{background:#f0f0f0}.app-main{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:16px;overflow:hidden}.pane{display:flex;flex-direction:column;min-height:0}.pane h2{margin:0 0 4px;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:#555}.hint{margin:0 0 8px;font-size:12px;color:#777;line-height:1.4}.canvas-frame{flex:1;border:1px solid #e0e0e0;border-radius:4px;overflow:hidden;min-height:0}.attribution{position:fixed;bottom:6px;right:10px;font-size:11px;color:#999;text-decoration:none;z-index:100}.attribution:hover{color:#555;text-decoration:underline}@media (max-width: 768px){html,body,#root,.app{height:auto;min-height:100%}.app-header{flex-wrap:wrap}.controls{flex-direction:column;align-items:stretch;gap:8px;width:100%}.controls-selects,.controls-actions{flex-wrap:wrap}.app-main{grid-template-columns:1fr;overflow:visible}.pane{min-height:60vh}}