:root{color-scheme:light;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color:#183e2f;background:#f1f6f2}
*{box-sizing:border-box}body{margin:0;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:#176345;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid #176345;outline-offset:3px}
.demo-header{height:64px;padding:0 28px;display:flex;align-items:center;justify-content:space-between;gap:16px;background:#fff;border-bottom:1px solid #e2eae4}
.demo-header h1{font-size:20px;font-weight:800;letter-spacing:-.5px;margin:0;white-space:nowrap}.demo-header nav{display:flex;gap:3px;padding:4px;background:#edf5ef;border-radius:12px}.demo-header button{border:0;background:transparent;color:#64796d;border-radius:9px;padding:8px 18px;font-size:13px;white-space:nowrap}.demo-header button[aria-pressed=true]{background:#176345;color:#fff;font-weight:650}.open-current{font-size:12px;white-space:nowrap}
.workspace{position:relative;margin:18px auto;width:100%;height:calc(100vh - 100px);height:calc(100dvh - 100px);max-height:876px}
.demo-pane{position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(100%,420px);height:100%;visibility:hidden;pointer-events:none;background:white;border:1px solid #dce7df;border-radius:16px;overflow:hidden;box-shadow:0 4px 18px #214d3110}.demo-pane.is-visible{visibility:visible;pointer-events:auto}.pane-heading{height:32px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;background:#fff;border-bottom:1px solid #eef2ed;font-size:11px}.pane-heading strong{font-weight:650}.pane-heading a{font-size:10px;color:#698272}
.demo-pane iframe{display:block;width:100%;height:calc(100% - 32px);border:0;background:#fff}.workspace[data-mode=both] #student-pane{left:calc(50% - 224px)}.workspace[data-mode=both] #merchant-pane{left:calc(50% + 224px)}
@media(max-width:899px){.wide-only{display:none!important}.demo-header{height:58px;padding:0 13px;gap:10px}.demo-header h1{font-size:16px}.demo-header button{font-size:12px;padding:7px 12px}.open-current{font-size:10px}.workspace{margin:0;height:calc(100vh - 58px);height:calc(100dvh - 58px);max-height:none}.demo-pane{max-width:420px;border:0;border-radius:0;box-shadow:none}.pane-heading{display:none}.demo-pane iframe{height:100%}}
@media(max-width:350px){.demo-header{padding:0 10px;gap:6px}.demo-header h1{font-size:14px}.demo-header button{padding:7px 9px}.demo-header nav{padding:3px}}