:root{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#25332c;background:#f6f5f0;font-synthesis:none;--accent:#bf4e28;--line:#dddfd5;--muted:#69736b;--dark:#202d29;--mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace}*{box-sizing:border-box}body{margin:0}button,a,textarea,summary{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{cursor:default;opacity:.45}button:focus-visible,a:focus-visible,summary:focus-visible,.preview-viewport:focus-visible{outline:3px solid #cd7246;outline-offset:3px}button{touch-action:manipulation}[hidden]{display:none!important}.topbar{height:89px;max-width:1536px;padding:0 5.2%;margin:auto;display:flex;align-items:center;gap:27px;border-bottom:1px solid var(--line)}.brand{color:#25332c;display:flex;align-items:center;gap:9px;font-size:31px;letter-spacing:-1.6px;font-weight:750;text-decoration:none}.brand-dot{color:var(--accent)}.product-label{font-size:10px;font-weight:700;letter-spacing:1.8px;border-left:1px solid #d2d6cc;padding-left:26px}.product-label span{font-size:9px;letter-spacing:0;padding:4px 6px;border:1px solid #deded4;margin-left:6px;border-radius:4px;color:var(--muted)}.local-badge{margin-left:auto;color:#667064;font-size:11px;display:flex;align-items:center;gap:7px}.dot{display:inline-block;width:5px;height:5px;background:#73a887;border-radius:50%}main{max-width:1536px;margin:auto;padding:0 5.2%}.intro{padding:45px 0 32px;display:flex;align-items:center;justify-content:space-between}.eyebrow{font-size:9px;letter-spacing:2px;font-weight:750;color:var(--accent);margin:0 0 15px}h1{font-size:clamp(30px,3vw,44px);line-height:1.15;font-weight:550;letter-spacing:-1.8px;margin:0 0 12px}.mobile-break{display:none}.lede{color:var(--muted);font-size:13px;margin:0;line-height:1.6}.intro-note{display:flex;gap:16px;align-items:center;padding-right:20px;color:#656f5c}.intro-note p{font-size:12px;line-height:1.7}.note-mark{font-size:37px;color:#b7b4a1;font-weight:300}.workbench{border:1px solid #cdd2c7;border-radius:12px;overflow:hidden;box-shadow:0 6px 24px #20302706}.sample-bar{background:#eeeee6;display:flex;align-items:center;padding:15px 19px;gap:24px;border-bottom:1px solid #cdd2c7}.sample-label{font-size:9px;font-weight:700;letter-spacing:1.4px;white-space:nowrap;color:#606b56}.samples{display:flex;gap:6px;flex-wrap:wrap}.sample{border:1px solid transparent;color:#666e61;font-size:11px;padding:8px 12px;border-radius:6px;background:transparent;transition:background .15s}.sample:hover{background:#e2e4d9}.sample.active{border-color:#cecfc3;background:#fafaf5;color:#384634;box-shadow:0 1px 2px #2737240a}.sample-number{font:9px var(--mono);margin-right:6px;color:#666d59}.sample.active .sample-number{color:var(--accent)}.panels{display:grid;grid-template-columns:minmax(290px,.78fr) minmax(0,1.65fr)}.panel-bar{height:54px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;gap:8px}.panel-bar h2{margin:0;font-size:11px;font-weight:500;white-space:nowrap}.editor-panel{background:var(--dark);min-width:0;color:#cbd6ca;display:flex;flex-direction:column}.editor-bar{border-bottom:1px solid #344039;background:#24312b}.editor-bar h2{font:11px var(--mono)}.file-icon{color:#b6bdab;font-size:16px;margin-right:8px}.live-label{display:flex;gap:6px;align-items:center;font-size:8px;letter-spacing:1.2px;color:#a9b89c}.editor-shell{display:flex;min-height:385px;height:clamp(385px,38vw,510px);overflow:hidden;padding-top:19px}.line-numbers{flex:0 0 44px;padding:0 10px 22px 0;text-align:right;font:11px/22px var(--mono);color:#899b8c;white-space:pre;overflow:hidden;user-select:none}.line-numbers .error-number{color:#ffb093;font-weight:bold}.editor-shell textarea{display:block;resize:none;width:100%;min-width:0;padding:0 20px 22px 3px;border:0;background:transparent;color:#e1e6c9;font:11px/22px var(--mono);outline:none;tab-size:2;caret-color:#ffbd76;white-space:pre;overflow:auto}.editor-shell:focus-within{box-shadow:inset 3px 0 #d37a49}.editor-footer{display:flex;justify-content:space-between;gap:10px;font:9px var(--mono);padding:11px 16px;color:#b3c0ae;border-top:1px solid #35423b}.muted{color:#65715f}.editor-hint{font-size:10px;line-height:1.6;margin:0;padding:14px 18px;color:#a2b29f;border-top:1px solid #35423b;margin-top:auto}.preview-panel{background:#fafbf6;display:flex;flex-direction:column;min-width:0}.preview-bar{border-bottom:1px solid #e1e5d9;background:#fcfcf8}.preview-bar h2{font-weight:650;color:#4c5949}.download{border:1px solid #d4dacb;background:#fdfef9;color:#52614b;border-radius:5px;font-size:10px;font-weight:600;padding:8px 10px;min-height:32px}.download:hover:not(:disabled){background:#edf2e7}.download span{font-size:16px;margin-right:5px}.preview-status{min-height:38px;display:flex;align-items:center;gap:7px;padding:10px 21px;font-size:10px;color:#537452;border-bottom:1px solid #e9ecdf;background:#f7faf2;line-height:1.5}.status-dot{width:5px;height:5px;background:#699662;flex:0 0 5px;border-radius:50%}.preview-status[data-state="error"]{color:#975030;background:#fff0e4}.preview-status[data-state="error"] .status-dot{background:#bf693a}.preview-status[data-state="pending"]{color:#737962;background:#f6f6ea}.preview-status[data-state="pending"] .status-dot{background:#9f9c64}.preview-viewport{height:clamp(385px,38vw,510px);min-height:300px;flex:0 0 auto;overflow:auto;position:relative;overscroll-behavior:contain;background-color:#f0f2ea;background-image:radial-gradient(#c4cbba 0.65px,transparent 0.65px);background-size:14px 14px}.preview-stage{padding:26px;min-width:100%;min-height:100%;display:flex;align-items:center;justify-content:center;width:max-content;height:max-content}.wiring-image{display:block;max-width:none;max-height:none;flex-shrink:0;box-shadow:0 2px 12px #2f453215;border:1px solid #dee5d9;background:#f5f7f6}.empty-preview{text-align:center;color:#7b8971;min-width:180px}.empty-symbol{font-size:36px;color:#b0b9a6}.empty-preview p{font-size:14px}.empty-preview span:last-child{font-size:11px}.preview-footer{min-height:47px;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 15px 8px 20px;border-top:1px solid #dce2d3;background:#fafcf6;font-size:9px;color:#69775f}.zoom-controls{display:flex;align-items:center;gap:2px;flex-shrink:0}.zoom-controls button{border:0;background:transparent;color:#536047;min-width:28px;height:29px;border-radius:4px;font-size:15px}.zoom-controls button:hover:not(:disabled){background:#e5eadb}.zoom-controls output{min-width:40px;text-align:center;font:10px var(--mono)}#zoom-fit{font-size:10px;padding:0 8px}.control-divider{height:13px;width:1px;background:#d8decf;margin:0 4px}.diagnostic{background:#49322a;padding:13px 17px;border-top:1px solid #976045;font-size:11px}.diagnostic-heading{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.diagnostic strong{font:600 10px var(--mono);color:#ffd0b4}.diagnostic p{margin:9px 0 0;color:#f0cdbc;line-height:1.6}.diagnostic button{border:0;background:#624334;color:#ffdcc6;padding:5px 8px;border-radius:4px;font:10px var(--mono)}.warnings{border-top:1px solid #e8d7b7;background:#fff4de;color:#80622e;padding:12px 19px;font-size:10px;line-height:1.6;overflow-wrap:anywhere}.warnings p{margin:4px 0}.below-workbench{display:flex;gap:35px;justify-content:space-between;align-items:start;padding:21px 1px 0}.pipeline{display:flex;align-items:center;gap:15px;flex-shrink:0;font:9px var(--mono);color:#6d765f}.pipeline b{font:500 10px Inter,ui-sans-serif,sans-serif;color:#6e7864;margin-left:5px}.pipeline i{font-style:normal;color:#707a63}.below-workbench p{max-width:540px;font-size:10px;line-height:1.7;color:#626d57;margin:0;text-align:right}.syntax-guide{border-top:1px solid var(--line);margin:31px 0 0;padding:18px 0;color:#52624b}.syntax-guide summary{font-size:11px;cursor:pointer}.syntax-guide summary span{float:right;font-size:10px;color:#626d57}.guide-content{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:13px 0}.guide-content h3{font-size:12px;font-weight:600}.guide-content p{font-size:11px;line-height:1.8;color:#697460}.guide-content code{font:10px var(--mono);background:#e9ecdf;padding:2px 4px;overflow-wrap:anywhere}.site-footer{max-width:1536px;margin:20px auto 0;padding:0 5.2% 25px;display:flex;justify-content:space-between;font-size:10px;color:#626d57}.site-footer>span:first-child{font-weight:650}.site-footer .muted{font-weight:400;margin-left:8px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.skip-link{position:fixed;top:-80px;left:16px;z-index:10;padding:12px;background:#fff;color:#263a29}.skip-link:focus{top:10px}.noscript{padding:20px;background:#ffeddc;color:#9b4827;text-align:center}
@media(min-width:1600px){.editor-shell,.preview-viewport{height:530px}}
@media(max-width:1000px){main,.topbar,.site-footer{padding-left:4%;padding-right:4%}.sample-bar{gap:14px;padding:12px}.sample{padding:8px 9px}.sample-label{font-size:8px;letter-spacing:1px}.intro-note{display:none}.panels{grid-template-columns:minmax(275px,.85fr) minmax(0,1.35fr)}.panel-bar{padding:0 14px}.below-workbench{gap:22px}.pipeline{gap:8px}.preview-footer{padding:8px 10px}.preview-stage{padding:18px}}
@media(max-width:760px){.topbar{height:72px;gap:17px}.brand{font-size:27px}.brand img{width:29px;height:29px}.product-label{padding-left:17px;font-size:8px;letter-spacing:1.4px}.product-label span{display:none}.local-badge{font-size:0;gap:0}.local-badge .dot{width:7px;height:7px}.intro{padding:32px 0 25px}h1{font-size:36px;line-height:1.15}.eyebrow{font-size:8px;letter-spacing:1.6px;margin-bottom:14px}.lede{font-size:12px;max-width:290px}.mobile-break{display:block}.sample-bar{align-items:start;flex-direction:column;gap:10px;padding:14px}.samples{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:6px}.sample{text-align:left;padding:11px 10px;min-height:38px;background:#e7e9de;border:1px solid #dce0d2}.sample-label{font-size:8px}.panels{display:flex;flex-direction:column}.editor-shell{height:290px;min-height:290px}.editor-shell textarea{font-size:12px;line-height:22px}.editor-hint{font-size:10px;padding:11px 16px}.panel-bar{height:51px}.preview-viewport{height:360px;flex:none;min-height:360px}.preview-stage{padding:15px}.preview-bar{border-top:1px solid #d3d9c9}.preview-footer{font-size:9px;flex-wrap:wrap;gap:5px}.zoom-controls button{height:36px;min-width:34px}.below-workbench{display:block;padding-top:18px}.pipeline{gap:18px}.below-workbench p{text-align:left;margin:14px 0 0;font-size:10px}.syntax-guide{margin-top:23px}.syntax-guide summary{font-size:11px;line-height:1.8}.syntax-guide summary span{display:block;float:none;margin-left:15px}.guide-content{grid-template-columns:1fr;gap:8px}.site-footer{font-size:9px;gap:17px;line-height:1.8;flex-direction:column;margin-top:15px}.site-footer .muted{margin-left:4px}.preview-status{font-size:10px;padding:10px 15px;min-height:42px}.download{font-size:10px;min-height:34px}.line-numbers{flex-basis:37px}.diagnostic{font-size:11px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}