:root{font-family:system-ui,sans-serif;color:#18352e;background:#f2f8f5}*{box-sizing:border-box}body{margin:0;padding:24px}main{max-width:720px;margin:24px auto;background:#fff;padding:32px;border:1px solid #dcebe3;border-radius:20px}h1{font-size:clamp(24px,5vw,36px);overflow-wrap:anywhere}p{line-height:1.65;overflow-wrap:anywhere}a{color:#087552}button,.button{display:inline-block;background:#087552;color:white;border:0;border-radius:10px;padding:12px 18px;font:inherit;text-decoration:none;cursor:pointer;margin:8px 8px 8px 0}button:disabled{opacity:.5;cursor:default}label{display:block;margin-top:18px}select{display:block;max-width:100%;padding:10px;margin:8px 0;font:inherit}section{border-top:1px solid #dcebe3;padding:16px 0}#result{white-space:pre-wrap}@media(max-width:480px){body{padding:12px}main{padding:20px;margin:0}}

/* Match the shared theme when the static Bitrix helper loads it. */
html[data-theme=dark]{color-scheme:dark;background:#121c17;color:#e1edda}
html[data-theme=dark] body{background:#121c17;color:#e1edda}
html[data-theme=dark] main{background:#1d2c22;border-color:#425b3d;color:#d7e5d0}
html[data-theme=dark] :is(h1,h2,h3,strong,b){color:#e1edda}
html[data-theme=dark] :is(p,label,small,section){color:#bed2b2;border-color:#425b3d}
html[data-theme=dark] a:not(.button){color:#b5d89f}
html[data-theme=dark] :is(button,.button){background:#a7ca8b;color:#172717;border-color:#a7ca8b}
html[data-theme=dark] :is(select,input,textarea){background:#17271c;color:#dcebd2;border:1px solid #526c46;color-scheme:dark;caret-color:#dcebd2}
html[data-theme=dark] :is(button,a,input,select,textarea):focus-visible{outline:3px solid #b2d493;outline-offset:3px}
html[data-theme=dark] #result{color:#c6dbb8}
/* Server-only error/info pages have no helper script: follow the device palette. */
@media(prefers-color-scheme:dark){
 html:not([data-theme]){color-scheme:dark;background:#121c17;color:#e1edda}
 html:not([data-theme]) body{background:#121c17;color:#e1edda}
 html:not([data-theme]) main{background:#1d2c22;border-color:#425b3d;color:#d7e5d0}
 html:not([data-theme]) :is(h1,h2,h3,strong,b){color:#e1edda}
 html:not([data-theme]) :is(p,label,small,section){color:#bed2b2;border-color:#425b3d}
 html:not([data-theme]) a:not(.button){color:#b5d89f}
 html:not([data-theme]) :is(button,.button){background:#a7ca8b;color:#172717;border-color:#a7ca8b}
 html:not([data-theme]) :is(select,input,textarea){background:#17271c;color:#dcebd2;border:1px solid #526c46;color-scheme:dark}
 html:not([data-theme]) :is(button,a,input,select,textarea):focus-visible{outline:3px solid #b2d493;outline-offset:3px}
 html:not([data-theme]) #result{color:#c6dbb8}
}