.rw-workshop{margin:32px 0 48px;border:1px solid #c9dddd;border-radius:22px;overflow:hidden;background:#f6faf9;box-shadow:0 14px 38px #153c3c09;padding:26px;color:#193939;scroll-margin-top:160px;min-width:0}
.rw-workshop>header{margin-bottom:22px}.rw-workshop>header h3{font-size:25px;letter-spacing:-.7px;margin:10px 0}.rw-workshop>header p{max-width:760px;color:#587071;margin:0;line-height:1.7}.rw-live-label{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:650;color:#32786c}.rw-live-label i{width:7px;height:7px;border-radius:50%;background:#46a68b;box-shadow:0 0 0 4px #46a68b18}
.rw-workshop button,#rules-code button{border:1px solid #cbdada;background:white;color:#25494a;padding:10px 14px;border-radius:9px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:background .16s,border-color .16s}.rw-workshop button:hover{background:#e5f3ef;border-color:#66a292}.rw-workshop button:disabled{opacity:.4;cursor:default}.rw-workshop button[aria-pressed=true],.rw-workshop .rw-primary{background:#214b47;color:white;border-color:#214b47}.rw-workshop :focus-visible,#rules-code :focus-visible{outline:3px solid #eea651;outline-offset:3px}
.rw-presets{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:20px}.rw-editor-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:20px;align-items:start}.rw-field{display:flex;flex-direction:column;gap:8px;font-size:12px;font-weight:650;margin-bottom:15px;min-width:0}.rw-field textarea,.rw-field input,.rw-field select,.rw-graph-tools select{border:1px solid #c8d8d5;border-radius:8px;background:white;padding:11px;color:#244641;font:inherit;width:100%;box-sizing:border-box}.rw-field textarea{min-height:200px;resize:vertical;font:13px/1.7 ui-monospace,SFMono-Regular,monospace;tab-size:2}.rw-field input{font-family:ui-monospace,monospace;font-size:13px}#es-facts{min-height:83px}.rw-small{font-size:12px!important;line-height:1.65!important;color:#657d79!important}
.rw-playback{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:16px 0;margin-top:10px;border-top:1px solid #dce8e3}.rw-playback label{display:flex;gap:8px;align-items:center;font-size:12px;margin-left:auto}.rw-playback input{accent-color:#2e806c;width:110px}.rw-playback output{font:12px ui-monospace,monospace;color:#637b77;min-width:62px}
.rw-graph-tools{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:6px 0 10px;font-size:12px;color:#58746e}.rw-graph-tools>span{margin-right:auto}.rw-graph-tools label{display:flex;align-items:center;gap:8px}.rw-graph-tools select{width:83px;padding:7px}.rw-graph{overflow:auto;max-height:480px;border:1px solid #d3e2e1;border-radius:12px;background-color:#eef6f6;background-image:radial-gradient(#b8d4d5 1px,transparent 1px);background-size:19px 19px;overscroll-behavior:contain}.rw-graph svg{display:block;min-width:900px;max-width:none;height:auto}.rw-inline-svg{overflow-x:auto;background:#eef6f6;border:1px solid #d3e2e1;border-radius:12px}.rw-inline-svg svg{width:100%;min-width:710px;display:block}.rw-node rect{fill:white;stroke:#b1c9c8;stroke-width:1.5}.rw-node text{font:600 14px system-ui,sans-serif;fill:#244c4e}.rw-node .rw-node-detail{font:11px system-ui,sans-serif;fill:#648083}.rw-node.active rect{fill:#234e4b;stroke:#234e4b;stroke-width:3}.rw-node.active text{fill:#fff}.rw-node.active .rw-node-detail{fill:#bddecd}.rw-node.good rect{fill:#e3f5e9;stroke:#85b497}.rw-node.bad rect{fill:#fff0e9;stroke:#d8a68d}.rw-edge{stroke:#52868e;stroke-width:1.8;fill:none}.rw-edge-label{font:11px system-ui,sans-serif;fill:#487274;paint-order:stroke;stroke:#eef6f6;stroke-width:4px}.rw-tree-hit{cursor:pointer}.rw-tree-hit:hover rect,.rw-tree-hit:focus rect{stroke:#da9744;stroke-width:3px}.rw-tree-hit:focus{outline:none}
.rw-step-info{padding:16px 18px!important;background:#e6f0ed;border-left:3px solid #5c9f8c;border-radius:0 9px 9px 0;margin:16px 0!important;min-height:54px;font-size:14px!important;line-height:1.65!important;overflow-wrap:anywhere}.rw-result{font-size:13px;line-height:1.7;background:white;padding:16px;border:1px solid #e0e9e4;border-radius:12px;overflow-wrap:anywhere}.rw-result:empty{display:none}.rw-result p{font-size:13px!important}.rw-result ul{padding-left:22px}.rw-two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:18px 0;min-width:0}.rw-two-col h4{font-size:13px;margin:0 0 10px}.rw-chips{display:flex;gap:7px;flex-wrap:wrap;margin:8px 0}.rw-chips code{font-size:12px;background:#e8f1ed;border-radius:6px;padding:6px 9px;overflow-wrap:anywhere}.rw-chips .selected{background:#254d48;color:white}.rw-error{color:#a33e28!important;font-size:13px!important;overflow-wrap:anywhere}.rw-error:empty{display:none}.rw-check{display:flex;align-items:center;gap:8px;margin:10px 0;font-size:13px}.rw-check input{accent-color:#387f6d}.rw-two-col fieldset{border:1px solid #cbded6;border-radius:12px;padding:12px 17px}.rw-two-col legend{font-size:12px;font-weight:650;padding:0 6px}
.rw-code{display:block;white-space:pre;overflow:auto;max-height:650px;background:#173333;color:#d3eee2;border-radius:12px;padding:22px;font:13px/1.75 ui-monospace,SFMono-Regular,monospace;tab-size:2}.rw-order-bars{display:flex;align-items:end;gap:5px;min-height:130px;padding:20px;background:#e9f4ef;border-radius:12px;overflow:auto}.rw-order-bars span{flex:0 0 25px;background:#9bbdb5;color:#244c4b;text-align:center;border-radius:5px 5px 0 0;font-size:11px;padding-top:3px}.rw-order-bars .success{background:#3f8e6f;color:#fff}.rw-order-bars .limit{background:#d59b60}.rw-production-inputs{display:grid;grid-template-columns:1fr 1fr 1fr 1.7fr;gap:12px}.rw-production-inputs>button{grid-column:1/-1;justify-self:start}.rw-save{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.rw-save span{font-size:12px;width:100%;color:#54766c}.rw-expanded .rw-graph{max-height:82vh;min-height:65vh}.rw-expanded{border-color:#609c90}#rules-code{margin-bottom:26px}#rules-code .rw-field{max-width:350px}
@media(max-width:800px){.rw-workshop{padding:16px;border-radius:15px;margin:24px 0 36px}.rw-workshop>header h3{font-size:21px}.rw-editor-grid,.rw-two-col{grid-template-columns:1fr}.rw-production-inputs{grid-template-columns:1fr 1fr}.rw-playback label{margin-left:0}.rw-playback button{padding:9px;font-size:12px}.rw-graph{max-height:390px}.rw-code{font-size:12px;padding:16px}.rw-presets button{font-size:12px}.rw-expanded .rw-graph{max-height:75vh;min-height:60vh}}
@media(prefers-reduced-motion:reduce){.rw-workshop *{transition:none!important;animation:none!important}}
.rw-worked{padding:24px;margin:28px 0;background:#faf9f4;border:1px solid #e4e4d8;border-radius:14px}.rw-worked>h3{font-size:20px!important;margin-top:0!important}.rw-worked>p{font-size:14px!important}.rw-table-scroll{overflow-x:auto;border:1px solid #dfdfd6;border-radius:9px}.rw-table-scroll table{width:100%;min-width:590px;border-collapse:collapse;font-size:13px;background:white}.rw-table-scroll th{background:#eeefe6;text-align:left;font-weight:650}.rw-table-scroll th,.rw-table-scroll td{padding:13px 14px;border-bottom:1px solid #e6e9df;line-height:1.65;vertical-align:top}.rw-table-scroll tr:last-child td{border-bottom:0}.rw-table-scroll td:first-child{font-weight:600}.rw-chips>strong{font-size:12px;align-self:center}@media(max-width:800px){.rw-worked{padding:16px}.rw-table-scroll table{font-size:12px}}
.rw-inline-svg svg{height:auto}.rw-reading p,.rw-worked td,.rw-worked th{overflow-wrap:anywhere}.rw-production-inputs .rw-field{min-width:0}
@media(max-width:800px){.rw-inline-svg::after{content:'Geser diagram ke samping untuk melihat alur lengkap →';display:block;position:sticky;left:0;padding:10px 12px;font-size:11px;color:#5b7b72;background:#eef6f6;max-width:100%;box-sizing:border-box}}

/* Expert systems: explicit evidence, readable trace, and compact controls. */
.ex-lab{margin:32px 0;padding:28px;border:1px solid #cbded8;border-radius:20px;background:linear-gradient(145deg,#f2f8f5,#fff 55%);color:#243e38;min-width:0;scroll-margin-top:130px}
.ex-lab header{margin-bottom:24px;max-width:76ch}.ex-lab h3{font-size:clamp(23px,2.4vw,30px);letter-spacing:-.7px}.ex-lab h4{margin:0 0 12px}.ex-kicker{font-size:12px;font-weight:700;color:#477565;letter-spacing:.03em}.ex-lab p,.ex-case p{line-height:1.75}.ex-lab button,.ex-case button{border:1px solid #bcd2c9;background:#fff;color:#254d41;border-radius:9px;padding:10px 14px;font:inherit;font-size:13px;font-weight:650;cursor:pointer;min-height:42px}.ex-lab button:hover,.ex-case button:hover{background:#e7f2eb;border-color:#628c78}.ex-lab button:disabled{opacity:.4;cursor:default}.ex-lab .ex-primary,.ex-case .ex-primary{background:#214f40;color:#fff;border-color:#214f40}.ex-lab :is(button,input,select,textarea):focus-visible,.ex-component:focus-visible rect{outline:3px solid #d1a547;outline-offset:3px}.ex-lab label{display:flex;flex-direction:column;gap:8px;font-size:13px;font-weight:650;min-width:0}.ex-lab input:not([type=checkbox]):not([type=range]),.ex-lab select,.ex-lab textarea{width:100%;box-sizing:border-box;border:1px solid #c7d9d1;background:white;border-radius:8px;padding:10px;color:#193e32;font:inherit;min-height:44px}.ex-lab textarea{font:12px/1.7 ui-monospace,SFMono-Regular,monospace;resize:vertical;min-height:190px}.ex-config,.ex-editor-grid,.ex-result-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.ex-config{grid-template-columns:1.5fr 1fr}.ex-lab fieldset{border:0;padding:0;margin:0;min-width:0}.ex-lab legend{font-size:14px;font-weight:700;margin-bottom:12px}.ex-fact-options{display:grid;gap:7px;max-height:350px;overflow-y:auto;padding:3px}.ex-lab .ex-check{display:flex;flex-direction:row;align-items:center;gap:9px;font-weight:500;padding:9px;border:1px solid #dbe6e0;border-radius:8px;background:#fff}.ex-check input{accent-color:#28614d;width:17px;height:17px;flex-shrink:0}.ex-check code{margin-left:auto;font-size:10px;color:#688273;overflow-wrap:anywhere}.ex-add-fact{display:flex;align-items:end;gap:8px;margin-top:14px}.ex-add-fact label{flex:1}.ex-lab .ex-hint{font-size:12px;line-height:1.7;color:#61716a;margin:12px 0}.ex-prediction{display:flex;align-items:end;gap:12px;border-top:1px solid #d6e4dc;margin-top:24px;padding-top:24px;flex-wrap:wrap}.ex-prediction label{flex:1;min-width:200px}.ex-message{font-size:14px;font-weight:600;color:#285e4e;min-height:24px}.ex-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:18px 0}.ex-playback{padding:16px;background:#fff;border:1px solid #dce5de;border-radius:12px}.ex-playback label{flex:1;min-width:100px}.ex-lab input[type=range]{accent-color:#27634e;width:100%}.ex-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin:25px 0}.ex-flow>div{position:relative;display:flex;flex-direction:column;gap:7px;padding:16px 12px;background:#edf4ef;border:1px solid #d2e3d8;border-radius:10px;font-size:13px;overflow-wrap:anywhere}.ex-flow>div:not(:last-child):after{content:'→';position:absolute;right:-18px;top:40%;color:#6b8b7c}.ex-flow small{font-size:11px;opacity:.7}.ex-flow .is-active{background:#234e40;color:white}.ex-step-text{padding:16px 20px;border-left:3px solid #c39f57;background:#fff9ea;border-radius:0 10px 10px 0;font-size:14px}.ex-result-grid{margin:22px 0}.ex-chips{display:flex;gap:7px;flex-wrap:wrap}.ex-chip{font-size:12px;padding:6px 9px;border-radius:7px;background:#e6f0e9;color:#2a5948;overflow-wrap:anywhere}.ex-warning:not(:empty){border-left:3px solid #bd8340;padding:10px;background:#fff4df;font-size:13px;color:#715121}.ex-warning:empty{display:none}.ex-table{overflow-x:auto;max-width:100%;margin:16px 0;border:1px solid #d9e4de;border-radius:10px}.ex-table table{border-collapse:collapse;min-width:640px;width:100%;font-size:12px;line-height:1.7;text-align:left;background:white}.ex-table th{background:#eaf2ed;color:#345d4d;padding:12px 14px;font-weight:650;vertical-align:top}.ex-table td{padding:12px 14px;border-top:1px solid #e2eae5;vertical-align:top;overflow-wrap:anywhere;min-width:90px}.ex-table tbody tr:nth-child(even){background:#fafcfb}.ex-details{margin:14px 0;border:1px solid #dbe4dd;border-radius:10px;background:#fff;overflow:hidden}.ex-details>summary{padding:15px 18px;display:flex;justify-content:space-between;gap:16px;list-style:none;cursor:pointer;font-weight:650;font-size:14px;color:#315546}.ex-details>summary::-webkit-details-marker{display:none}.ex-details>summary span{font-size:20px}.ex-details[open]>summary span{transform:rotate(180deg)}.ex-details>:not(summary){margin-left:18px;margin-right:18px}.ex-details>ol{padding-left:23px;margin-bottom:18px}.ex-details .rw-code{max-height:520px;overflow:auto}.ex-case-index{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:22px 0}.ex-case-index a{display:grid;grid-template-columns:25px 1fr;gap:5px 12px;background:#f3f6f1;border:1px solid #dae4d9;border-radius:10px;padding:14px;text-decoration:none;color:#335846;font-size:13px;font-weight:650}.ex-case-index small{grid-column:2;color:#748776}.ex-case{border-top:1px solid #d8e3d9;padding:30px 0;scroll-margin-top:130px}.ex-case .rw-code{white-space:pre;overflow:auto}.ex-exercise{background:#f4f5ec;border-radius:12px;padding:20px;margin-top:20px}.ex-exercise h4{margin-top:0}.ex-code-lines{padding-left:35px}.ex-code-lines li{padding:12px 8px;border-bottom:1px solid #e2e9e1}.ex-code-lines li::marker{color:#64876f;font:12px monospace}.ex-code-lines code{display:block;white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px}.ex-code-lines p{margin:8px 0 0;font-size:13px}.ex-architecture-scroll{overflow:auto;background:#fff;border:1px solid #d9e4df;border-radius:12px}.ex-architecture-scroll svg{width:100%;min-width:810px;height:auto;display:block}.ex-component rect{fill:#f1f6f2;stroke:#b9d0c4;stroke-width:1.5}.ex-component text{font:600 14px system-ui;fill:#315548}.ex-component{cursor:pointer}.ex-component.is-active rect{fill:#214f40;stroke:#214f40}.ex-component.is-active text{fill:#fff}.ex-edge-label{font:11px system-ui;fill:#567565}.ex-component-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}.ex-component-tabs button{font-size:11px;padding:6px 9px}.ex-component-tabs [aria-pressed=true]{background:#e0eee4;border-color:#32614d}.ex-component-detail{border-left:3px solid #84ab95;padding:18px 20px;background:#f6f9f6;margin:16px 0;min-height:145px}.ex-component-detail p{font-size:14px;margin:7px 0}.ex-cf-inputs{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:24px 0}.ex-cf-inputs output{font:600 20px ui-monospace,monospace}.ex-cf-bars{padding:18px 0}.ex-cf-bars>div{display:grid;grid-template-columns:145px 1fr 55px;align-items:center;gap:12px;font-size:12px;margin:12px 0}.ex-bar{height:12px;border-radius:8px;background:#e3ede6;overflow:hidden}.ex-bar i{display:block;height:100%;background:#58836a;border-radius:8px}.ex-lab [hidden]{display:none!important}
@media(max-width:760px){.ex-lab{padding:18px 14px;border-radius:14px;margin:22px 0}.ex-config,.ex-editor-grid,.ex-result-grid,.ex-case-index{grid-template-columns:1fr}.ex-flow{grid-template-columns:1fr 1fr;gap:18px}.ex-flow>div:nth-child(2):after{content:''}.ex-flow>div:nth-child(3):before{content:'↓';position:absolute;top:-20px;left:50%;color:#6b8b7c}.ex-cf-bars>div{grid-template-columns:105px 1fr 45px;gap:8px}.ex-check code{display:none}.ex-prediction{align-items:stretch}.ex-actions button{flex-grow:1}.ex-add-fact{flex-wrap:wrap}.ex-cf-inputs{gap:16px}.ex-details>summary{padding:14px 12px}.ex-details>:not(summary){margin-left:12px;margin-right:12px}.ex-component-detail{padding:14px}.ex-playback{padding:10px}.ex-case h3{font-size:22px}}
