:root{--ink:#1e2b42;--muted:#7d8797;--line:#e4e8ef;--soft:#f6f8fb;--accent:#ef704c;--green:#16856a;--code:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:#fff}button,a,textarea{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #99bfe8;outline-offset:3px}button{border:0;background:transparent;color:inherit}button:disabled{cursor:wait;opacity:.7}a{color:inherit;text-decoration:none}.topbar{height:91px;display:flex;align-items:center;justify-content:space-between;padding:0 30px 0 26px;border-bottom:1px solid var(--line);gap:20px}.brand{display:flex;align-items:center;gap:13px;flex-shrink:0}.brand-icon{display:block;background:#fff0e9;color:var(--accent);height:44px;width:44px;border-radius:13px;font-size:32px;font-weight:700;font-style:italic;text-align:center;line-height:44px;position:relative}.brand-icon span{font-size:20px;position:absolute;right:4px;top:4px;font-style:normal}.brand>span:last-child{font-size:20px;letter-spacing:-.65px;font-weight:750}.brand strong{font-weight:400}.brand small{display:block;font-size:9px;font-weight:600;color:#969eaa;letter-spacing:2.1px;margin-top:5px}.header-right{display:flex;align-items:center;gap:19px}.local-badge{color:#637382;font-size:12px;white-space:nowrap}.local-badge i,.statusbar i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#2d9f7a;margin-right:7px}.version{font-family:var(--code);font-size:11px;background:var(--soft);border:1px solid var(--line);padding:8px 10px;border-radius:6px;white-space:nowrap}.run-button{display:flex;align-items:center;justify-content:center;gap:9px;padding:12px 15px;background:var(--green);color:white;border-radius:8px;font-weight:600;font-size:13px;box-shadow:0 3px 5px #16856a15;min-width:170px;transition:background .15s}.run-button:hover{background:#10725a}.run-button svg{width:15px;height:15px;fill:currentColor}.run-button kbd{font:10px var(--code);border-left:1px solid #ffffff40;padding-left:12px;margin-left:4px;color:#ffffffb0}.workspace{display:grid;grid-template-columns:216px minmax(380px,1.24fr) minmax(340px,1fr);height:calc(100dvh - 122px);min-height:570px}.sidebar{background:#f8f9fc;border-right:1px solid var(--line);display:flex;flex-direction:column;padding:27px 17px 20px;overflow:auto}.sidebar-label{font-size:9px;color:#8791a3;font-weight:700;letter-spacing:1.65px;display:flex;align-items:center;justify-content:space-between}.sidebar-label span{font:10px var(--code);border:1px solid #dfe3eb;border-radius:4px;padding:2px 4px;color:#9ca6b4;letter-spacing:0}.sidebar-intro{font-size:11px;color:#8a94a3;line-height:1.65;margin:15px 0 20px}#examples{display:flex;flex-direction:column;gap:6px}.example-button{display:flex;align-items:center;text-align:left;gap:10px;border-radius:8px;padding:12px 9px;position:relative;width:100%;transition:background .15s}.example-button:hover{background:#edf0f6}.example-button.active{background:white;box-shadow:0 2px 9px #21364b07;border:1px solid #e4e8ef;padding:11px 8px}.example-button.active:before{content:"";width:3px;height:22px;position:absolute;left:-1px;background:var(--accent);border-radius:0 3px 3px 0}.example-number{font:11px var(--code);color:#a3adbb;display:grid;place-items:center;width:26px;height:29px;flex-shrink:0}.active .example-number{background:#fff0e9;border-radius:6px;color:#dd7457}.example-button strong{font-size:12px;font-weight:550;display:block}.example-button small{font-size:10px;color:#94a0af;margin-top:5px;display:block}.sidebar-bottom{margin-top:auto;padding:30px 7px 0}.eyebrow{font-size:8px;letter-spacing:1.65px;font-weight:650;color:#9aa2b0}.pipeline{display:flex;flex-direction:column;align-items:flex-start;padding:17px 0 9px;gap:5px}.pipeline>span{font:11px var(--code);border:1px solid #e2e6ee;background:#fff;border-radius:5px;padding:5px 9px}.pipeline b{font-weight:400;color:#b6bdc9;margin-left:12px;font-size:12px}.pipeline em{font:9px var(--code);font-style:normal;margin-left:9px;color:#99a3b2}.sidebar-bottom p{font-size:10px;line-height:1.8;color:#9da6b3}.editor-panel{min-width:0;display:flex;flex-direction:column;border-right:1px solid var(--line)}.editor-toolbar{height:55px;display:flex;justify-content:space-between;align-items:stretch;background:#fafbfd;border-bottom:1px solid var(--line);flex-shrink:0}.file-tabs{display:flex;min-width:0}.file-tab{font-size:11px;color:#9aA3b1;padding:0 16px;white-space:nowrap;border-right:1px solid transparent;border-left:1px solid transparent;position:relative}.file-tab.active{background:white;color:#30425b;border-color:var(--line);border-left:0;font-weight:550}.file-tab.active:before{content:"";height:2px;background:var(--accent);position:absolute;top:0;left:0;right:0}.file-tab.active:after{content:"";height:1px;background:white;position:absolute;bottom:-1px;left:0;right:0}.file-icon{font-family:var(--code);color:#6c86ad;margin-right:6px}#draft-dot{display:inline-block;background:#2eaa83;width:5px;height:5px;border-radius:50%;margin:0 0 1px 7px}.file-actions{display:flex;align-items:center;margin-right:10px;gap:1px}.file-actions button{font-size:19px;color:#8d99a9;padding:6px 9px}.file-actions button:hover{background:#edf0f5;border-radius:5px}.editor-view{flex:1;min-height:0;display:flex;flex-direction:column}.editor-heading{padding:21px 22px 19px;display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#7e8a9d;gap:8px}.editor-heading>span{font-weight:550}.editor-heading button{font-size:10px;color:#a2aab8}.editor-heading button:hover{color:var(--accent)}.code-area{flex:1;display:flex;overflow:hidden;min-height:0}#line-numbers{white-space:pre;text-align:right;color:#c0c6d0;padding:0 14px 40px 17px;min-width:51px;font:12px/24px var(--code);overflow:hidden;user-select:none}.code-wrap{position:relative;flex:1;min-width:0;overflow:hidden}.code-font{font:12px/24px var(--code);letter-spacing:0;tab-size:4;margin:0;border:0;white-space:pre;padding:0 25px 50px 0;font-variant-ligatures:none}.code-wrap pre{position:absolute;inset:0;pointer-events:none;overflow:hidden;color:#3a4660}.code-wrap textarea{position:absolute;inset:0;width:100%;height:100%;resize:none;color:transparent;caret-color:#253652;background:transparent;outline:none;overflow:auto;-webkit-text-fill-color:transparent}.code-wrap textarea::selection{background:#cbdcf899}.code-wrap textarea:focus-visible{outline:none}.syntax-comment{color:#a1aab7;font-style:italic}.syntax-string{color:#b96b42}.syntax-keyword{color:#8c63b4}.syntax-directive{color:#3e81a1}.syntax-number{color:#428d86}.editor-footer{height:38px;flex-shrink:0;border-top:1px solid #f0f2f7;display:flex;align-items:center;gap:15px;padding:0 15px;font:9px var(--code);color:#a4adbb}.editor-footer>span:first-child{margin-right:auto;font:9px -apple-system,BlinkMacSystemFont,sans-serif}.io-panel{display:flex;flex-direction:column;min-width:0;min-height:0;background:#fff}.input-panel{padding:25px 24px 18px;border-bottom:1px solid var(--line);flex-shrink:0}.panel-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.panel-heading h2{font-size:16px;font-weight:550;letter-spacing:-.35px;margin:6px 0 0}.panel-heading button{font-size:10px;color:#7b899c;border:1px solid #e2e7ef;background:white;border-radius:5px;padding:6px 9px}.panel-heading button:hover{background:var(--soft)}#input{width:100%;height:116px;min-height:70px;max-height:260px;resize:vertical;font:12px/22px var(--code);padding:12px 14px;border:1px solid #e4e8ef;border-radius:7px;background:#fafbfd;color:#42516c;outline:none}#input:focus{border-color:#8eb5c7;box-shadow:0 0 0 2px #eaf2f7}.input-note{font-size:9px;line-height:1.6;color:#a1aab7;margin:9px 0 0}.input-note span{margin-right:5px;color:#a0aebf}.output-panel{flex:1;min-height:160px;display:flex;flex-direction:column}.output-heading{padding:23px 24px 12px;margin:0}.result-badge{font-size:8px;letter-spacing:0;font-weight:500;background:#f0f3f7;color:#8a96a7;border-radius:4px;padding:4px 6px;vertical-align:middle;margin-left:8px}.result-badge.success{background:#e6f5ed;color:#328367}.result-badge.error{background:#fcece6;color:#b5684e}.result-badge.busy{background:#fff4dd;color:#a88642}.output-content{flex:1;min-height:100px;overflow:auto;padding:8px 24px 20px}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:210px;height:100%;text-align:center}.empty-mark{font:28px var(--code);letter-spacing:-4px;color:#c3cbd7;width:62px;height:62px;line-height:62px;border:1px solid #edf0f5;background:#fafbfd;border-radius:18px;margin-bottom:8px}.empty-state h3{font-size:13px;letter-spacing:-.1px;font-weight:500;color:#8190a3;margin-bottom:0}.empty-state p{font-size:11px;line-height:1.8;color:#a3adba}.empty-state>span{font:9px var(--code);background:#f7f8fb;border:1px solid #edf0f5;padding:5px 8px;border-radius:4px;color:#adb6c3;margin-top:5px}#output,#errors{font:12px/23px var(--code);white-space:pre-wrap;overflow-wrap:anywhere;margin:8px 0}#output{color:#337963}#errors{color:#b0604f;background:#fff6f2;padding:12px;border-radius:6px;font-size:10px;line-height:1.8}.expected,.build-details{border-top:1px solid #edf0f5;flex-shrink:0}summary{list-style:none;cursor:pointer;font-size:10px;padding:14px 24px;color:#7e8ca1;display:flex;align-items:center;gap:8px}summary::-webkit-details-marker{display:none}summary:before{content:"›";font-size:14px;color:#a5afbd;transition:transform .15s}details[open]>summary:before{transform:rotate(90deg)}summary>span:last-child{font-size:9px;color:#a9b2bf;margin-left:auto}.expected pre{margin:0;padding:0 24px 17px;font:10px/20px var(--code);color:#7f8da0;max-height:175px;overflow:auto;white-space:pre-wrap}.build-details{background:#fcfdff}.build-log{font:10px/1.8 var(--code);max-height:190px;overflow:auto;padding:0 24px 17px;color:#8591a3;white-space:pre-wrap;overflow-wrap:anywhere}.build-step{margin-bottom:12px}.build-step:last-child{margin-bottom:0}.build-step strong{font-weight:600;color:#508b75}.build-step.failed strong{color:#b0604f}.build-step code{display:block;color:#6c7d93}.build-step pre{font:inherit;white-space:pre-wrap;margin:3px 0;color:#ac725f}.example-note{border-top:1px solid var(--line);background:#fafbfd;padding:15px 24px;min-height:64px;font-size:10px;line-height:1.8;color:#8997aa}.example-note strong{font-weight:550;color:#63758e}.statusbar{height:31px;border-top:1px solid var(--line);display:flex;align-items:center;gap:23px;padding:0 20px;font-size:9px;color:#94a0b2;background:#fbfcfe}.statusbar i{width:5px;height:5px}.status-tip{margin-left:auto;letter-spacing:.2px}.generated-heading{padding:20px 23px;display:flex;align-items:center;justify-content:space-between;color:#8d99ab;font-size:11px;gap:10px}.generated-heading button{font-size:10px;border:1px solid var(--line);padding:5px 8px;border-radius:4px}.generated-code{font:11px/21px var(--code);overflow:auto;flex:1;margin:0;padding:0 23px 30px;color:#6e7c91;tab-size:4}.reference{overflow:auto;padding:32px}.reference h1{font-size:25px;line-height:1.2;letter-spacing:-1px;font-weight:550;max-width:300px;margin:12px 0 15px}.reference h2{font-size:13px;font-weight:600;margin-top:26px}.reference p{font-size:12px;line-height:1.85;color:#8190a3}.reference code,.reference pre{font:11px/1.8 var(--code);color:#ae6f50}.reference table{width:100%;border-collapse:collapse;font-size:11px;margin:22px 0}.reference td,.reference th{padding:11px 5px;text-align:left;border-bottom:1px solid var(--line);color:#8290a3;font-weight:400}.reference th{font-size:9px;letter-spacing:1px;color:#a0a8b5}.reference pre{background:var(--soft);padding:15px;border-radius:7px}.reference-note{padding-top:15px;border-top:1px solid var(--line)}.toast{position:fixed;bottom:48px;left:50%;transform:translateX(-50%);padding:12px 20px;background:#24364d;color:#fff;box-shadow:0 5px 25px #1d2d4430;border-radius:7px;font-size:12px;z-index:10}.hidden{display:none!important}@media(min-width:1550px){.workspace{grid-template-columns:235px minmax(400px,1.35fr) minmax(380px,1fr)}.code-font,#line-numbers{font-size:13px;line-height:26px}.input-panel{padding-top:30px}#input{height:145px}.sidebar{padding-left:22px;padding-right:22px}}@media(max-width:1140px){.workspace{grid-template-columns:178px minmax(320px,1.2fr) minmax(300px,1fr)}.sidebar{padding-left:10px;padding-right:10px}.local-badge{display:none}.topbar{padding:0 20px}.file-tab{padding:0 10px;font-size:10px}.file-actions{margin-right:3px}.file-actions button{padding:6px}.editor-footer{gap:9px}.editor-footer>span:first-child{font-size:8px}.input-panel{padding:22px 18px 16px}.output-heading{padding:22px 18px 12px}.output-content{padding-left:18px;padding-right:18px}.example-note{padding:13px 18px}.sidebar-intro{font-size:10px}.example-button strong{font-size:11px}.header-right{gap:12px}}@media(max-width:850px){.workspace{grid-template-columns:minmax(300px,1fr) minmax(280px,1fr)}.sidebar{display:none}.brand>span:last-child{font-size:18px}.version{display:none}.topbar{height:77px}.workspace{height:calc(100dvh - 108px)}.run-button{min-width:0}.editor-footer>span:first-child{display:none}.file-tab{padding:0 9px}.file-actions{display:none}}@media(max-width:620px){.topbar{padding:0 14px;gap:10px}.brand-icon{height:36px;width:36px;line-height:36px}.brand>span:last-child{font-size:16px}.brand small{font-size:7px;letter-spacing:1px}.run-button{font-size:11px;padding:11px}.run-button kbd{display:none}.workspace{display:flex;flex-direction:column;height:auto;min-height:0}.editor-panel{height:480px;border-right:0;border-bottom:1px solid var(--line)}.io-panel{min-height:550px}.statusbar{position:sticky;bottom:0}.status-tip{display:none}.output-content{min-height:190px}.example-note{min-height:0}.reference{padding:23px}}

.compact-library{display:none;align-items:center;justify-content:space-between;gap:12px;padding:10px 18px;border-bottom:1px solid var(--line);background:#f8f9fc;flex-shrink:0}.compact-library label{font-size:10px;color:#8895a8}.compact-library select{font:11px -apple-system,BlinkMacSystemFont,sans-serif;color:#53657e;border:1px solid var(--line);border-radius:5px;background:white;padding:6px 9px;max-width:220px}@media(max-width:850px){.compact-library{display:flex}}

.workspace{grid-template-rows:minmax(0,1fr)}.editor-panel,.sidebar{min-height:0}

.lab-banner{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 16px;font-size:9px;line-height:1.5;color:#977451;background:#fffaf1;border-bottom:1px solid #f3e8d8;flex-shrink:0}.lab-banner button{font-size:9px;color:#967957;white-space:nowrap}.lab-banner span{min-width:0}@media(max-width:620px){.lab-banner{padding:9px 12px;font-size:8px}.lab-banner span{max-width:330px}}