/* Merajut Indonesia — Developer / physical keyboard documentation */
:root{--dev-ink:#162c23;--dev-green:#14764b;--dev-green-deep:#0c4f34;--dev-wash:#f6faf7;--dev-line:#dfebe4;--dev-muted:#67766e;--dev-code:#13271f}
html{scroll-padding-top:90px}
.dev-guide section[id],.dev-guide article[id]{scroll-margin-top:102px}
.dev-hero{background:radial-gradient(ellipse 34% 55% at 98% 20%,rgba(213,242,221,.68),transparent 80%),linear-gradient(125deg,#f6faf7,#eef6f0 55%,#edf7f0);border-bottom:1px solid var(--dev-line);padding:68px 0 76px;overflow:hidden}
.dev-hero-grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:6.2%;align-items:center}
.dev-kicker{display:inline-flex;align-items:center;gap:.65rem;background:rgba(255,255,255,.78);border:1px solid #d7e9dc;border-radius:100px;padding:.4rem .85rem;font-weight:700;color:#396950;font-size:12px;letter-spacing:.035em;margin-bottom:1.4rem}
.dev-status-dot{width:8px;height:8px;display:inline-block;background:#20ac65;border-radius:50%;box-shadow:0 0 0 4px #def3e6}
.dev-hero h1{font-size:clamp(2.75rem,4.7vw,4.6rem);font-weight:800;line-height:1.065;letter-spacing:-.053em;color:var(--dev-ink);margin:0 0 1.15rem;max-width:650px}
.dev-hero h1 span{color:var(--dev-green)}
.dev-hero p{color:#62766a;font-size:1.08rem;line-height:1.8;max-width:630px;margin:0 0 1.75rem}
.dev-hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:2.4rem}
.dev-btn{display:inline-flex;align-items:center;justify-content:center;gap:1rem;text-decoration:none!important;padding:.86rem 1.2rem;border-radius:10px;font-size:.91rem;font-weight:700;transition:transform .15s,background .15s}
.dev-btn:hover{transform:translateY(-2px)}
.dev-btn-primary{background:var(--dev-green-deep);color:#fff!important;box-shadow:0 12px 24px rgba(10,74,46,.12)}
.dev-btn-primary:hover{background:#0b603d}
.dev-btn-ghost{border:1px solid #c4d9cc;color:var(--dev-green-deep)!important;background:#fff8}
.dev-btn-ghost:hover{background:#fff}
.dev-stats{display:flex;gap:1.5rem;flex-wrap:wrap;font-size:.82rem;color:#687f70}
.dev-stats span:not(:last-child){border-right:1px solid #cbded1;padding-right:1.5rem}
.dev-stats strong{color:#175238;font-size:1.2rem;font-weight:800;margin-right:.15rem}
.dev-glyph-panel{max-width:530px;background:#fff;border:1px solid #dbeadf;border-radius:20px;padding:1rem;box-shadow:0 25px 85px rgba(42,88,54,.11);transform:rotate(1deg)}
.dev-panel-top,.dev-panel-bottom{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#6c8173;padding:.3rem .45rem 1rem}
.dev-panel-mark{font-weight:850;letter-spacing:.12em;color:#254c37}
.dev-panel-online{display:inline-flex;gap:.45rem;align-items:center}
.dev-panel-online span{background:#44c782;height:7px;width:7px;border-radius:50%}
.dev-panel-bottom{padding:1rem .5rem .1rem}
.dev-script-mosaic{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.dev-mosaic-tile{height:118px;background:#f4faf5;border:1px solid #e1efe5;border-radius:11px;display:flex;align-items:center;flex-direction:column;justify-content:center;gap:5px}
.dev-mosaic-tile:nth-child(3n+1){background:#e7f4eb}
.dev-mosaic-tile:nth-child(4n+2){background:#f6f4ea}
.dev-mosaic-tile:nth-child(7){grid-column:span 2}
.dev-mosaic-glyph{font-size:clamp(2.3rem,4.1vw,3.2rem);line-height:1.25;color:#175a3a}
.dev-mosaic-tile small{color:#60796c;font-size:.76rem;font-weight:650}
.dev-guide{background:#fff}
.dev-sidebar{position:sticky;top:102px;border:1px solid var(--dev-line);background:#fbfdfa;border-radius:14px;padding:1.5rem 1rem;display:flex;flex-direction:column;gap:2px}
.dev-sidebar-caption{color:#9aaba0;font-weight:850;letter-spacing:.15em;font-size:.69rem;margin:.1rem .75rem .8rem}
.dev-sidebar>a{color:#53695b;font-size:.92rem;font-weight:650;text-decoration:none;padding:.7rem .78rem;border-radius:8px;transition:background .15s,color .15s}
.dev-sidebar>a:hover,.dev-sidebar>a:focus{background:#eaf5ec;color:#155d3c}
.dev-sidebar-note{background:#e9f5ec;border-radius:10px;padding:1rem;margin-top:1rem;display:grid;gap:.4rem;color:#416b50;font-size:.79rem;line-height:1.6}
.dev-sidebar-note strong{font-size:.85rem;color:#164e33}
.dev-main{min-width:0}
.dev-section{border-bottom:1px solid var(--dev-line);padding:0 0 3.3rem;margin:0 0 3.45rem}
.dev-last-section{border-bottom:0;margin-bottom:0;padding-bottom:0}
.dev-section-label{color:var(--dev-green);font-size:.72rem;font-weight:850;letter-spacing:.14em;text-transform:uppercase;margin-bottom:.95rem}
.dev-section h2{font-size:clamp(1.7rem,2.7vw,2.5rem);letter-spacing:-.045em;color:var(--dev-ink);font-weight:800;line-height:1.15;margin-bottom:1rem}
.dev-lead{font-size:1.01rem;color:var(--dev-muted);line-height:1.85;max-width:760px;margin-bottom:1.8rem}
.dev-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.65rem}
.dev-benefits>div{background:#fbfdfa;border:1px solid var(--dev-line);border-radius:13px;padding:1.3rem}
.dev-benefits h3{font-size:1rem;font-weight:750;margin:.8rem 0 .42rem;color:var(--dev-ink)}
.dev-benefits p{font-size:.82rem;line-height:1.7;color:var(--dev-muted);margin:0}
.dev-benefits code,.dev-hint code,.dev-inline-note code,.dev-faq code{font-size:.89em;color:#0f6441}
.dev-mini-icon{width:38px;height:38px;border-radius:11px;background:#e5f4e9;color:#16744b;display:grid;place-items:center;font-size:1.4rem}
.dev-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem;margin:1.6rem 0}
.dev-steps>div{display:flex;align-items:flex-start;gap:.8rem}
.dev-steps>div>span{flex:none;width:31px;height:31px;border:1px solid #b7dfc6;background:#eaf8ee;color:#18714b;border-radius:9px;display:grid;place-items:center;font-size:.8rem;font-weight:850}
.dev-steps p{color:var(--dev-muted);font-size:.82rem;line-height:1.7;margin:0}
.dev-steps strong{color:#1c3b29}
.dev-code-panel{border:1px solid #1c4030;background:var(--dev-code);border-radius:14px;overflow:hidden;color:#eef9f2;box-shadow:0 9px 25px rgba(11,41,25,.08)}
.dev-code-top{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.7rem .95rem;border-bottom:1px solid rgba(223,244,229,.11);background:#19372b;min-height:56px}
.dev-mode-tabs{display:flex;gap:4px;background:#10281e;padding:3px;border-radius:9px}
.dev-mode-tabs button{border:0;border-radius:6px;color:#a9c0ae;background:transparent;padding:.45rem .85rem;font-size:.81rem;font-weight:700}
.dev-mode-tabs button.is-active{background:#315a42;color:white}
.dev-copy{border:1px solid rgba(255,255,255,.22);border-radius:7px;background:transparent;color:#d9efe0;padding:.42rem .7rem;white-space:nowrap;font-size:.78rem;font-weight:650}
.dev-copy:hover{background:#315b42}
.dev-code-subbar{display:flex;justify-content:space-between;align-items:center;gap:.7rem;flex-wrap:wrap;padding:.85rem 1.15rem .1rem;color:#b0c8b9;font-size:.78rem}
.dev-code-subbar label{display:inline-flex;gap:.5rem;align-items:center}
.dev-code-subbar select{border-radius:6px;background:#214938;color:#e6f5e9;border:1px solid #507560;padding:.2rem .4rem}
.dev-code-content{margin:0;padding:1.5rem 1.2rem;color:#b9edcf;font-size:clamp(.73rem,1.3vw,.89rem);line-height:1.9;overflow:auto;white-space:pre;tab-size:2}
.dev-code-content code{color:inherit;white-space:inherit;font:inherit;word-break:normal}
.dev-code-footer{background:#19372b;display:flex;justify-content:space-between;align-items:center;gap:.8rem;flex-wrap:wrap;border-top:1px solid rgba(223,244,229,.11);padding:.8rem 1.15rem;font-size:.78rem;color:#a5c2ae}
.dev-code-footer a{color:#c6f1d0;font-size:.79rem;font-weight:700;text-decoration:none}
.dev-code-footer a:hover{text-decoration:underline}
.dev-hint{color:#6d8075;font-size:.87rem;line-height:1.75;margin-top:1.1rem;margin-bottom:0}
.dev-section-split{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem}
.dev-section-split .dev-lead{margin-bottom:1.35rem}
.dev-text-link{white-space:nowrap;color:#18774d;font-size:.84rem;font-weight:700;text-decoration:none;margin-bottom:1.5rem}
.dev-script-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.dev-script-card{min-width:0;border:1px solid var(--dev-line);border-radius:14px;padding:1.35rem;transition:box-shadow .2s,transform .2s,border-color .2s;background:#fff}
.dev-script-card:hover{box-shadow:0 14px 28px rgba(19,83,48,.07);transform:translateY(-2px);border-color:#9fd4b3}
.dev-script-head{display:flex;justify-content:space-between;align-items:flex-start}
.dev-script-icon{height:68px;width:68px;display:grid;place-items:center;border-radius:12px;font-size:2.3rem;color:#17613e;background:#ecf7ef;line-height:1}
.dev-script-card:nth-child(3n+2) .dev-script-icon{background:#f5f2e9;color:#745e27}
.dev-filetype{font-size:.67rem;letter-spacing:.08em;background:#eff5f1;color:#6b8a74;border-radius:5px;padding:.22rem .4rem;font-weight:750}
.dev-script-card h3{font-size:1.22rem;color:var(--dev-ink);font-weight:800;margin:1.15rem 0 .28rem}
.dev-script-card>p{margin:0 0 1rem;color:#799082;font-size:.78rem;min-height:19px}
.dev-script-card>code{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:#f7faf7;border-radius:6px;color:#476454;font-size:.68rem;padding:.5rem}
.dev-script-actions{display:flex;align-items:center;justify-content:space-between;gap:.5rem;border-top:1px solid #ebf1ed;margin-top:1.05rem;padding-top:1rem}
.dev-script-actions a{color:#14744a;font-size:.81rem;font-weight:750;text-decoration:none}
.dev-script-actions button{color:#486b53;border:0;background:none;font-size:.8rem;font-weight:700}
.dev-script-actions :is(a,button):hover{text-decoration:underline}
.dev-inline-note{font-size:.85rem;color:#60766a;line-height:1.7;background:#f4faf5;padding:1rem 1.2rem;border-left:3px solid #8ecdad;border-radius:4px 9px 9px 4px;margin-top:1.25rem}
.dev-playground{border:1px solid #d8e8dd;border-radius:15px;overflow:hidden;background:#fcfefc}
.dev-play-head{padding:1rem 1.3rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;background:#eff8f1;border-bottom:1px solid #dbece0}
.dev-play-head>div:first-child{display:flex;flex-direction:column;gap:.3rem}
.dev-play-head strong{font-size:.92rem;color:#1e5536}
.dev-play-head span{font-size:.75rem;color:#679176}
.dev-play-controls{display:flex;align-items:center;gap:.7rem}
.dev-play-controls label{font-size:.79rem;font-weight:650;color:#597261}
.dev-play-controls select{font-size:.83rem;font-weight:650;padding:.5rem .85rem;background:#fff;border:1px solid #cde3d3;border-radius:8px;color:#214831}
.dev-demo-label{display:block;padding:1.2rem 1.3rem .6rem;font-size:.75rem;font-weight:750;color:#688274}
.dev-playground textarea{width:calc(100% - 2.6rem);margin:0 1.3rem;min-height:200px;border:1px solid #dfebe2;border-radius:10px;outline:none;resize:vertical;padding:1.05rem;line-height:2;font-size:1.55rem;background:#fff;color:#1c3526;direction:auto}
.dev-playground textarea:focus{border-color:#4eaa77;box-shadow:0 0 0 3px #e1f5e8}
.dev-playground textarea::placeholder{font-size:.94rem;color:#9ea9a1}
.dev-play-bottom{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.8rem 1.3rem 1.15rem;color:#819385;font-size:.75rem}
.dev-play-bottom button{white-space:nowrap;border:0;background:transparent;color:#17714b;font-size:.78rem;font-weight:700}
.dev-play-bottom button:hover{text-decoration:underline}
.dev-code-panel-simple{margin:1.5rem 0}
.dev-code-panel-simple .dev-code-top>span{font-size:.8rem;font-weight:700;color:#c0ddc9}
.dev-table-wrap{width:100%;overflow:auto;border:1px solid var(--dev-line);border-radius:12px}
.dev-api-table{width:100%;border-collapse:collapse;font-size:.86rem}
.dev-api-table th{text-align:left;background:#f3faf5;color:#416b53;font-size:.78rem;padding:.95rem 1.1rem}
.dev-api-table td{padding:.85rem 1.1rem;border-top:1px solid var(--dev-line);color:#617469;line-height:1.5}
.dev-api-table td:first-child{width:42%;color:#25563a}
.dev-api-table code{font-size:.86em;color:#16683e}
.dev-faq{border-top:1px solid var(--dev-line)}
.dev-faq details{border-bottom:1px solid var(--dev-line);padding:.15rem 0}
.dev-faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;cursor:pointer;color:#213e2e;font-weight:750;font-size:.91rem;padding:1.13rem .3rem}
.dev-faq summary::-webkit-details-marker{display:none}
.dev-faq summary::after{content:'+';font-size:1.35rem;color:#548564;font-weight:500;line-height:1}
.dev-faq details[open] summary::after{content:'−'}
.dev-faq details p{font-size:.88rem;line-height:1.9;color:#687c6d;padding:0 2.3rem .9rem .3rem;margin:0}
.dev-bottom-cta{margin-top:2rem;border-radius:14px;background:linear-gradient(110deg,#e9f7ed,#f8fbf8);border:1px solid #d4ead9;padding:1.5rem;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.dev-bottom-cta strong{font-size:1.05rem;color:#174b31}
.dev-bottom-cta p{font-size:.85rem;line-height:1.7;color:#647d6e;margin:.3rem 0 0}
@media(max-width:1199px){.dev-hero-grid{gap:3%}.dev-script-mosaic{gap:7px}.dev-mosaic-tile{height:97px}.dev-script-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:991px){.dev-hero{padding:48px 0}.dev-hero-grid{grid-template-columns:1fr}.dev-glyph-panel{max-width:670px;transform:none}.dev-script-mosaic{grid-template-columns:repeat(7,1fr)}.dev-mosaic-tile{height:88px}.dev-mosaic-tile:nth-child(7){grid-column:auto}.dev-mosaic-glyph{font-size:2.3rem}.dev-sidebar{position:static;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:.2rem;padding:.8rem}.dev-sidebar-caption{width:100%;margin:.2rem .6rem}.dev-sidebar>a{font-size:.78rem;padding:.5rem .65rem}.dev-sidebar-note{display:none}.dev-benefits{gap:.65rem}}
@media(max-width:767px){.dev-steps,.dev-benefits{grid-template-columns:1fr}.dev-script-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dev-hero h1{font-size:clamp(2.4rem,8vw,3.5rem)}.dev-hero-actions{gap:.6rem}.dev-hero-actions .dev-btn{font-size:.82rem}.dev-stats{gap:.7rem}.dev-stats span:not(:last-child){padding-right:.7rem}.dev-script-mosaic{grid-template-columns:repeat(4,1fr)}.dev-mosaic-tile{height:105px}.dev-mosaic-tile:nth-child(7){grid-column:span 2}.dev-section{margin-bottom:2.5rem;padding-bottom:2.5rem}.dev-bottom-cta{flex-direction:column;align-items:flex-start}.dev-play-head{align-items:flex-start}.dev-play-bottom{flex-direction:column;align-items:flex-start}}
@media(max-width:520px){.dev-script-grid{grid-template-columns:1fr}.dev-script-card>code{font-size:.77rem}.dev-code-top{align-items:flex-start;flex-wrap:wrap}.dev-mode-tabs{width:100%}.dev-mode-tabs button{flex:1}.dev-play-head{flex-direction:column}.dev-play-controls{width:100%;justify-content:space-between}.dev-stats{font-size:.75rem}.dev-hero{padding:38px 0 45px}.dev-panel-top,.dev-panel-bottom{font-size:9px}.dev-mosaic-tile{height:79px}.dev-mosaic-glyph{font-size:1.9rem}.dev-section-split{display:block}.dev-text-link{display:inline-block}.dev-steps>div{gap:.6rem}}
@media(prefers-reduced-motion:reduce){.dev-btn,.dev-script-card{transition:none}}
/* Hosted embed experience: copy and try, never download. */
.dev-script-actions{justify-content:space-between}
.dev-script-actions button{cursor:pointer;padding:0;text-align:left}
.dev-script-actions button:first-child{color:#117649}
.dev-script-actions button:focus-visible,.dev-btn:focus-visible,.dev-copy:focus-visible{outline:3px solid #67ad83;outline-offset:3px}
.dev-playground textarea{padding-bottom:2rem}
.dev-code-footer span:last-child{color:#a4e7bb}
.dev-script-card .dev-filetype{background:#e6f6ea;color:#19754a}
@media(max-width:480px){.dev-code-footer{align-items:flex-start}.dev-script-actions button{font-size:.84rem}}
.dev-code-subbar label[hidden]{display:none!important}

/* Demonstration of a developer-positioned ON/OFF button inside any toolbar. */
.dev-toggle-btn{white-space:nowrap;border:1px solid #b2d9bd;background:#fff;color:#236c43;border-radius:8px;padding:.51rem .8rem;font-size:.81rem;font-weight:800;cursor:pointer}
.dev-toggle-btn.is-on{background:#13744a;color:#fff;border-color:#13744a}
.dev-toggle-btn:focus-visible{outline:3px solid #67ad83;outline-offset:3px}
@media(max-width:520px){.dev-play-controls{flex-wrap:wrap}.dev-toggle-btn{flex-basis:100%}}

/* v3.1.0: nine-script catalogue, responsive without an oversized seventh tile. */
.dev-script-mosaic { grid-template-columns:repeat(3,minmax(0,1fr)); }
.dev-script-mosaic .dev-mosaic-tile:nth-child(7){grid-column:auto;}
@media(max-width:991px){.dev-script-mosaic{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:767px){.dev-script-mosaic{grid-template-columns:repeat(3,minmax(0,1fr));}}