:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color-scheme:light dark;background-color:#111827;color:#f9fafb}*,*:before,*:after{box-sizing:border-box}body,html,#root{margin:0;padding:0;height:100%}.app-root{height:100%}.workshop-container{display:grid;grid-template-columns:minmax(500px,420px) 1fr;height:100vh;max-height:100vh}.workshop-panel{padding:1.5rem}.workshop-panel--left{background:radial-gradient(circle at top left,#1f2937 0,#020617 60%);border-right:1px solid #1f2937;display:flex;flex-direction:column;gap:1.5rem}.workshop-panel--right{background:#020617}.workshop-header h1{font-size:1.6rem;margin:0 0 .25rem}.workshop-subtitle{margin:0;font-size:.9rem;color:#9ca3af}.workshop-step-info{background:#0f172acc;border-radius:.75rem;padding:1rem 1.25rem;border:1px solid #1f2937;display:flex;flex-direction:column;gap:.75rem}.step-indicator{display:flex;justify-content:space-between;align-items:baseline;font-size:.9rem;color:#9ca3af}.step-indicator strong{font-size:1.1rem;color:#e5e7eb}.step-text p{margin:0;font-size:.95rem;line-height:1.5}.workshop-controls{display:flex;gap:.75rem;flex-wrap:wrap}.btn{border:1px solid #374151;background:#111827;color:#e5e7eb;padding:.5rem .9rem;font-size:.9rem;border-radius:999px;cursor:pointer;transition:background .12s ease,border-color .12s ease,transform 80ms ease}.btn:hover:not(:disabled){background:#1f2937;border-color:#4b5563;transform:translateY(-1px)}.btn:disabled{opacity:.35;cursor:default}.btn--primary{background:#2563eb;border-color:#1d4ed8;color:#f9fafb}.btn--primary:hover:not(:disabled){background:#1d4ed8;border-color:#1d4ed8}.btn--ghost{background:transparent;border-style:dashed}.workshop-footer{margin-top:auto;font-size:.8rem;color:#9ca3af}.workshop-panel--right canvas{width:100%!important;height:100%!important;display:block}@media (max-width: 900px){.workshop-container{display:flex;flex-direction:column;height:auto;max-height:none;overflow:visible}.workshop-panel--right{order:0;width:100%;height:50vh;max-height:60vh}.workshop-panel--right canvas{height:100%!important}.workshop-panel--left{order:1;width:100%;border-right:none;border-top:1px solid #1f2937;max-height:none}}@media (max-width: 600px){.workshop-panel--right{height:45vh}.workshop-panel--left{padding:1rem}.btn{width:100%;text-align:center}.workshop-controls{flex-direction:column;gap:.5rem}.workshop-header h1{font-size:1.3rem}}