:root{--font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;--bg-color: #0b0f19;--panel-bg: rgba(57, 57, 57, .7);--panel-border: rgba(255, 255, 255, .08);--text-primary: #f3f4f6;--text-secondary: #9ca3af;--primary-accent: #0284c7;--primary-gradient: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%)}*{box-sizing:border-box;margin:0;padding:0}html{font-size:90%}body{font-family:var(--font-family);background-color:var(--bg-color);color:var(--text-primary);height:100vh;overflow:hidden;display:flex;flex-direction:column}#app{display:flex;flex-direction:column;align-items:center;height:100%;width:100%;overflow:hidden}.app-header{display:flex;justify-content:space-between;width:100%;align-items:center;padding:.4rem .75rem;background:var(--panel-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--panel-border);z-index:10;position:sticky;top:0;flex-shrink:0;flex-wrap:wrap;gap:.4rem}.logo{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.logo h3{font-size:clamp(.85rem,2.25vw,1.2rem);white-space:nowrap}.gradient-text{background:var(--primary-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.controls-panel{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem 1rem;font-size:clamp(.75rem,2.5vw,1rem)}.control-item{display:flex;flex-direction:row;align-items:flex-start;margin-right:0}.control-item label{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);margin-bottom:.25rem}.control-item select{background:#1f2937cc;border:1px solid var(--panel-border);color:var(--text-primary);padding:.35rem .75rem;font-family:var(--font-family);font-size:.875rem;outline:none;cursor:pointer;transition:border-color .2s}.control-item select:focus{border-color:var(--primary-accent)}.status-item{display:flex;flex-direction:row;align-items:space-between}.status-item .label{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);padding-left:.5rem}.status-item .value{font-size:1rem;color:var(--text-primary)}.btn-action,.btn-secondary{font-family:var(--font-family);background:var(--primary-gradient);color:#fff;border:none;padding:.3rem .6rem;cursor:pointer;transition:all .2s ease}.btn-action:hover,.btn-secondary:hover{filter:brightness(.8)}.btn-secondary{background:#777}.canvas-container{flex:1;position:relative;width:100%;min-height:0;overflow:hidden}#renderCanvas{width:100%;height:100%;display:block;outline:none}#overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:700px;min-height:100px;color:#555;font-size:2rem;padding:1rem;background:#e1e1e1e6;border:3px solid #bbb;border-radius:1rem}#instruction{position:absolute;top:8%;left:3%;max-width:90%;min-height:10px;font-size:.85rem;padding:.2rem;color:#bbb}@media (max-width: 600px){.app-header{padding:.3rem .5rem;gap:.3rem}.controls-panel{gap:.3rem .6rem;font-size:.75rem}.control-item select{padding:.25rem .5rem;font-size:.75rem}.status-item .value{font-size:.85rem}.status-item .label{font-size:.65rem}.btn-action,.btn-secondary{padding:.2rem .4rem;font-size:.75rem}#overlay{width:90vw;font-size:1rem}}