:root{--bg-color: #2d3e50;--banner-color: #4fc3f7;--output-bg: #f5f5f5;--text-white: #ffffff;--text-dark: #333333;--nav-height: 50px;--footer-height: 60px;--banner-height: 40px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background-color:var(--bg-color);color:var(--text-white);height:100vh;display:flex;flex-direction:column;overflow:hidden}.navbar{height:var(--nav-height);display:flex;align-items:center;justify-content:space-between;padding:0 20px;background-color:#0003}.nav-brand{font-size:1.2rem;font-weight:700;margin:0}.nav-menu a{color:var(--text-white);text-decoration:none;margin-left:20px;font-size:.9rem;opacity:.8;transition:opacity .2s}.nav-menu a:hover{opacity:1}.banner{height:var(--banner-height);background-color:var(--banner-color);color:var(--text-dark);display:flex;align-items:center;padding:0 20px;font-weight:500;font-size:.95rem}.banner a{color:#0056b3;text-decoration:underline;font-weight:700}.banner a:hover{text-decoration:none;opacity:.8}.workspace{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px;min-height:0}.workspace.full-width{grid-template-columns:1fr}.pane{display:flex;flex-direction:column;height:100%;min-width:0;min-height:0;overflow:hidden}.pane-header{margin-bottom:8px;font-weight:700;font-size:1rem;flex-shrink:0}.monaco-container{flex:1;border:1px solid #445566;border-radius:4px;overflow:hidden;min-height:0}.output-container{flex:1;background-color:var(--output-bg);color:var(--text-dark);border-top-left-radius:4px;border-top-right-radius:4px;padding:10px;font-family:Courier New,Courier,monospace;overflow:auto;white-space:pre-wrap;word-break:break-all;min-height:0}.initial-state{display:flex;justify-content:center;align-items:center;height:100%}#btn-load-ruby{background-color:var(--banner-color);color:#fff;border:none;border-radius:4px;padding:10px 20px;font-size:1rem;cursor:pointer;transition:background-color .2s}#btn-load-ruby:hover{filter:brightness(.9)}.loading-state{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;color:#666}.spinner{border:4px solid #f3f3f3;border-top:4px solid var(--banner-color);border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite;margin-bottom:15px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.progress-text{font-weight:700}.input-container{display:flex;align-items:center;background-color:var(--output-bg);border-top:1px solid #ddd;padding:8px 10px;border-bottom-left-radius:4px;border-bottom-right-radius:4px}.prompt-label{color:var(--banner-color);font-weight:700;margin-right:8px;font-family:Courier New,Courier,monospace}.input-field{flex:1;background:transparent;border:none;font-family:Courier New,Courier,monospace;font-size:1rem;color:var(--text-dark);outline:none}.footer{height:var(--footer-height);display:flex;justify-content:space-between;align-items:center;padding:0 20px;background-color:#0000001a}.footer-left,.footer-right{display:flex;gap:15px}.footer-center{color:#ffffffb3;font-size:.85rem;text-align:center}.footer-center a{color:var(--banner-color);text-decoration:none;border-bottom:1px dotted transparent;transition:all .2s ease}.footer-center a:hover{border-bottom-color:var(--banner-color);filter:brightness(1.2)}.btn-icon{background:none;border:none;cursor:pointer;color:var(--text-white);padding:5px;transition:transform .1s;display:flex;align-items:center;justify-content:center}.btn-icon:hover{transform:scale(1.1)}.btn-play{color:var(--banner-color);background-color:transparent}.btn-play{background-color:var(--banner-color);width:40px;height:40px;border-radius:4px;color:#fff}.btn-play:disabled{background-color:#666;cursor:not-allowed;opacity:.7}.btn-play:hover:not(:disabled){filter:brightness(1.1);transform:none}.btn-save,.btn-eye{width:40px;height:40px;border-radius:4px;background-color:#ffffff1a}.btn-save:hover,.btn-eye:hover{background-color:#fff3}.hidden{display:none!important}.content-page{flex:1;padding:40px;overflow-y:auto;color:var(--text-white);max-width:800px;margin:0 auto;line-height:1.6;width:100%}.content-page h1,.content-page h2{margin-bottom:20px;color:var(--banner-color)}.content-page p{margin-bottom:15px}.content-page ul{margin-bottom:15px;padding-left:20px}.content-page a{color:var(--banner-color);text-decoration:none}.content-page a:hover{text-decoration:underline}@media(max-width:768px){.navbar{height:auto;flex-direction:column;padding:10px;gap:10px}.nav-menu{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}.nav-menu a{margin-left:10px;margin-right:10px}.banner{height:auto;padding:10px;text-align:center}.workspace{display:flex;flex-direction:column;flex:1;overflow:hidden}.pane{flex:1;min-height:0}.footer{height:auto;flex-direction:column;padding:15px;gap:15px}.footer-center{order:2;margin-bottom:5px}.content-page{padding:20px}}