:root{--ink:#102a24;--muted:#64736d;--line:#d9e3de;--paper:#f7faf8;--green:#176b55;--green-dark:#0d4437;--blue:#3978d4;--orange:#ffab19;--red:#c94646;--shadow:0 18px 50px rgba(15,42,35,.12);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:#eaf1ed}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:linear-gradient(135deg,#eef4f0,#e5eee9)}button,input,textarea{font:inherit}.studio-topbar{min-height:72px;display:flex;align-items:center;gap:22px;padding:10px 20px;background:#102a24;color:white;box-shadow:0 4px 18px rgba(0,0,0,.18);position:relative;z-index:20}.studio-brand{display:flex;align-items:center;gap:11px;color:inherit;text-decoration:none;min-width:max-content}.studio-brand span:last-child{display:grid}.studio-brand small{color:#b9d1c8}.brand-cube{width:34px;height:34px;background:#41b883;border:3px solid #dff7ec;transform:rotate(30deg);border-radius:5px;box-shadow:inset -8px -8px rgba(0,0,0,.13)}.project-name{display:flex;align-items:center;gap:8px;flex:1;max-width:440px}.project-name span{font-size:12px;color:#b9d1c8}.project-name input{width:100%;border:1px solid #45655b;background:#193b31;color:white;border-radius:8px;padding:9px 11px;font-weight:750}.top-actions,.run-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.save-state{font-size:12px;color:#b9d1c8}.button-primary,.button-secondary,.button-danger,.file-button{border:0;border-radius:8px;padding:9px 13px;font-weight:800;cursor:pointer}.button-primary{background:#f3c64d;color:#2e250b}.button-secondary{background:#e7efeb;color:#18392f}.button-danger{background:#ffe2e2;color:#852929}.button-danger:disabled{opacity:.45;cursor:not-allowed}.file-button{display:inline-flex}.file-button input{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}.mode-tabs{height:56px;display:flex;padding:8px 20px 0;background:white;border-bottom:1px solid var(--line)}.mode-tabs button{border:0;background:transparent;padding:10px 20px;color:var(--muted);font-weight:850;border-bottom:3px solid transparent;cursor:pointer}.mode-tabs button span{font-size:11px;margin-right:7px;color:#8ba198}.mode-tabs button.is-active{color:var(--green);border-color:var(--green)}main{height:calc(100vh - 128px);min-height:560px}.studio-mode{display:none;height:100%}.studio-mode.is-active{display:flex;flex-direction:column}.blocks-toolbar,.web-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 18px;background:#f9fbfa;border-bottom:1px solid var(--line)}.blocks-toolbar>div:first-child,.web-toolbar>div:first-child{display:grid;gap:2px}.blocks-toolbar span,.web-toolbar span{font-size:13px;color:var(--muted)}.run-actions label{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:7px}.blocks-layout,.web-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(340px,.75fr);flex:1;min-height:0}.blockly-workspace{min-width:0;height:100%;background:white}.simulation-panel,.preview-panel{min-width:0;background:#f7faf8;border-left:1px solid var(--line);display:flex;flex-direction:column;overflow:auto}.panel-heading,.preview-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--line);background:white}.panel-heading>div{display:grid}.panel-heading span,.preview-head span{font-size:12px;color:var(--muted)}.status-badge{padding:5px 9px!important;border-radius:999px;background:#e5eee9;color:var(--green)!important;font-weight:850}.status-badge.running{background:#fff0c2;color:#775900!important}.status-badge.error{background:#ffe2e2;color:#852929!important}.simulation-stage{position:relative;min-height:280px;overflow:hidden;background:linear-gradient(#87c9ee 0 52%,#88b85e 52%);border-bottom:1px solid #668c4a}.stage-grid{position:absolute;inset:52% 0 0;background-image:linear-gradient(rgba(40,75,34,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(40,75,34,.22) 1px,transparent 1px);background-size:28px 28px;transform:perspective(300px) rotateX(55deg);transform-origin:top}.builder{position:absolute;width:30px;height:44px;left:calc(50% - 15px);top:calc(52% - 42px);transition:transform .18s ease;filter:drop-shadow(0 5px 3px rgba(0,0,0,.25))}.builder:before{content:"";position:absolute;left:5px;top:0;width:20px;height:20px;background:#f0c28d;border:3px solid #243b38}.builder:after{content:"";position:absolute;left:2px;top:22px;width:26px;height:20px;background:#3978d4;border:3px solid #243b38}.builder span{position:absolute;width:5px;height:5px;background:#21332f;top:8px;left:10px;z-index:2;box-shadow:8px 0 #21332f}.trail-layer{position:absolute;inset:0}.placed-block{position:absolute;width:22px;height:22px;border:2px solid rgba(20,35,30,.6);background:#8a9194;box-shadow:inset -5px -5px rgba(0,0,0,.15);transform:translate(-50%,-50%)}.placed-block.MADERA{background:#b98954}.placed-block.CRISTAL{background:rgba(190,235,245,.72)}.placed-block.AGUA{background:#438ed1}.simulation-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-bottom:1px solid var(--line)}.simulation-stats span{display:grid;background:white;padding:8px;text-align:center;font-size:11px;color:var(--muted)}.simulation-stats strong{color:var(--ink);font-size:13px}.console-head{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;background:#17231f;color:white}.console-head button,.preview-head button{border:0;background:transparent;color:inherit;font-weight:750;cursor:pointer}.console{min-height:110px;max-height:190px;overflow:auto;margin:0;padding:10px 12px;background:#0f1916;color:#d6e7e0;font:12px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace}.console p{margin:0 0 4px}.console-error{color:#ff9999}.console-success{color:#8fe0b6}.console-muted{color:#789087}.generated-code{margin-top:auto;border-top:1px solid var(--line);background:white}.generated-code summary{padding:10px 12px;font-size:12px;font-weight:850;cursor:pointer}.generated-code pre{max-height:180px;overflow:auto;margin:0;padding:12px;background:#eef3f0;font-size:11px}.web-layout{grid-template-columns:minmax(420px,1fr) minmax(420px,1fr)}.code-panel{min-width:0;display:flex;flex-direction:column;background:#18231f}.file-tabs{display:flex;background:#101916;border-bottom:1px solid #34443e}.file-tabs button{border:0;border-right:1px solid #34443e;background:#192720;color:#91a89e;padding:12px 17px;font:12px ui-monospace,SFMono-Regular,Consolas,monospace;cursor:pointer}.file-tabs button.is-active{background:#22342d;color:white;border-top:2px solid #4bc18b}.editor-shell{display:grid;grid-template-columns:auto 1fr;flex:1;min-height:280px;overflow:hidden}.line-numbers{padding:14px 10px;text-align:right;white-space:pre;color:#61766d;background:#101916;border-right:1px solid #34443e;font:14px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;user-select:none;overflow:hidden}.editor-shell textarea{width:100%;height:100%;resize:none;border:0;outline:0;padding:14px;color:#e2eee9;background:#18231f;tab-size:2;font:14px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre;overflow:auto}.code-panel footer{display:flex;justify-content:flex-end;gap:18px;padding:6px 12px;color:#a9bbb4;background:#176b55;font-size:11px}.preview-panel iframe{width:100%;flex:1;min-height:300px;border:0;background:white}.browser-dots{display:flex;gap:5px}.browser-dots i{width:9px;height:9px;border-radius:50%;background:#e56464}.browser-dots i:nth-child(2){background:#e9b84d}.browser-dots i:nth-child(3){background:#55b978}.web-console{min-height:120px;max-height:150px}.toast{position:fixed;left:50%;bottom:22px;z-index:100;transform:translate(-50%,20px);padding:10px 15px;border-radius:8px;background:#102a24;color:white;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:980px){.studio-topbar{flex-wrap:wrap}.project-name{order:3;min-width:100%;max-width:none}.save-state{display:none}main{height:auto;min-height:calc(100vh - 170px)}.blocks-layout,.web-layout{grid-template-columns:1fr}.blockly-workspace{height:620px}.simulation-panel,.preview-panel{border-left:0;border-top:1px solid var(--line)}.code-panel{height:620px}.preview-panel iframe{height:520px;flex:none}}
@media(max-width:620px){.studio-topbar{padding:10px}.studio-brand small{display:none}.top-actions{width:100%;justify-content:flex-start}.mode-tabs{padding-left:5px}.mode-tabs button{padding:10px}.blocks-toolbar,.web-toolbar{align-items:flex-start;flex-direction:column}.blocks-layout{display:flex;flex-direction:column}.blockly-workspace{height:540px}.simulation-stats{grid-template-columns:repeat(2,1fr)}}
 .studio-seo-title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}