.demo-box{margin:34px 0;padding:26px;border:1px solid #ccd2c5;border-radius:14px;background:#fff}
.demo-box h2{margin-top:0}
.demo-note{font-size:15px;color:#46605a;margin:6px 0 18px}
.demo-controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:12px 0}
.demo-box label{font-weight:600;display:block;margin:10px 0 6px}
.demo-box select,.demo-box textarea{width:100%;font:15px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;padding:10px 12px;border:1px solid #b9c2b3;border-radius:8px;background:#fbfbf7;color:#152b2b}
.demo-box select{font-family:inherit;max-width:420px}
.demo-box textarea{min-height:190px;resize:vertical}
.demo-box button,.demo-file{font:600 15px/1 system-ui,sans-serif;padding:12px 18px;border-radius:999px;border:1px solid #152b2b;cursor:pointer}
.demo-run{background:#152b2b;color:#f6f5ee}
.demo-reset,.demo-file{background:transparent;color:#152b2b}
.demo-file input{position:absolute;width:1px;height:1px;opacity:0}
.demo-file:focus-within,.demo-box button:focus-visible{outline:3px solid #358064;outline-offset:3px}
.demo-summary{margin:20px 0 10px}
.demo-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.demo-table{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
.demo-table th,.demo-table td{padding:9px 10px;border-bottom:1px solid #e1e5dc;text-align:left;vertical-align:top}
.demo-table .num{text-align:right;white-space:nowrap}
.demo-badge{display:inline-block;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}
.st-KESZ .demo-badge{background:#dcefe4;color:#1d5a3f}
.st-BIZONYTALAN .demo-badge{background:#fbefc9;color:#6b4f00}
.st-NINCS .demo-badge{background:#f1dcd8;color:#7a2b1f}
.demo-empty{color:#7a2b1f}
.seg-points{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;padding:0;list-style:none}
.seg-points li{padding:18px;border:1px solid #ccd2c5;border-radius:12px;background:#fff}
@media (max-width:600px){.demo-box{padding:18px 14px;margin:24px 0}.guide-page .demo-table{min-width:0}.demo-table thead{display:none}.demo-table,.demo-table tbody,.demo-table tr,.demo-table td{display:block;width:100%}.demo-table tr{padding:10px 0;border-bottom:1px solid #e1e5dc}.demo-table td{border:0;padding:3px 0;overflow-wrap:anywhere;white-space:normal}.demo-table td:empty{display:none}.demo-table td:not(.demo-line):not(:has(.demo-badge))::before{content:attr(data-label) ": ";font-weight:600}.demo-table .demo-line{font-family:ui-monospace,Menlo,monospace}.demo-table .num{text-align:left}.demo-box button,.demo-file{flex:1 1 auto;text-align:center}}