.demo-switch{position:sticky;top:0;z-index:65;display:flex;justify-content:center;align-items:center;gap:5px;background:var(--paper,#fff);border-bottom:1px solid var(--line,#ddd);padding:6px 10px;font:600 13px/1.3 system-ui,sans-serif}.demo-switch a{min-height:42px;display:flex;align-items:center;justify-content:center;gap:6px;padding:7px 13px;border:1px solid transparent;border-radius:8px;text-decoration:none;color:var(--ink,#222);white-space:nowrap}.demo-switch img{width:18px;height:18px;border-radius:5px}.demo-switch a[aria-current]{background:var(--acc,#333);color:var(--on-acc,#fff)}.demo-switch a:hover{border-color:var(--acc,#333)}.demo-switch .demo-switch__home{font-size:24px;padding-inline:10px}.demo-switch a:focus-visible{outline:3px solid var(--acc);outline-offset:2px}.topbar{position:relative;top:auto;padding-top:10px}.topbar .brand img{width:27px;height:27px;border-radius:8px}.topbar .brand b{font-size:16px}.topbar .brand small{font-size:10px}.hello__title{font-size:clamp(27px,4.5vw,40px);max-width:34ch}.demo-switch--embed{display:none}
#demo-dialog{background:var(--paper,#fff);color:var(--ink,#222);border:1px solid var(--line,#ddd);border-radius:22px;width:min(620px,calc(100% - 24px));max-height:85dvh;overflow:auto;padding:24px;font:16px/1.75 system-ui,sans-serif;box-shadow:0 22px 90px #0004}#demo-dialog::backdrop{background:#14182088}.demo-dialog__head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px}.demo-dialog__head h2{margin:0;font-size:24px;line-height:1.4}.demo-dialog__head button{border:1px solid var(--line);border-radius:50%;width:42px;height:42px;cursor:pointer;color:inherit;background:var(--card,#fff);font-size:26px;flex:none}.dx-tabs{display:flex;flex-wrap:wrap;gap:7px;margin:15px 0}.dx-button,.dx-tabs button{background:var(--acc,#333);color:#fff;border:0;border-radius:9px;padding:11px 16px;font:700 14px/1.5 system-ui;cursor:pointer;min-height:44px}.dx-tabs button{background:var(--card,#fff);color:var(--ink);border:1px solid var(--line)}.dx-tabs button[aria-pressed=true]{background:var(--acc);color:#fff}.dx-button--line{background:var(--card);color:var(--ink);border:1px solid var(--line)}.dx-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.dx-card{border:1px solid var(--line,#ddd);border-radius:13px;padding:17px;background:var(--card,#fff);margin:13px 0}.dx-card h3{margin:0 0 10px;font-size:18px}.dx-card p{margin:7px 0}.dx-hint{font-size:13px;color:var(--ink-2,#68707b)}.dx-stamps{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin:22px 0}.dx-stamps span{aspect-ratio:1;display:grid;place-items:center;border:1px dashed var(--acc);border-radius:50%;font-size:23px;max-width:65px}.dx-stamps .earned{color:#fff;background:var(--acc);border:0}.dx-progress{display:flex;justify-content:space-between;gap:5px;margin:20px 0;list-style:none;padding:0}.dx-progress li{flex:1;font-size:12px;text-align:center;padding:12px 3px;border-top:4px solid var(--line)}.dx-progress li.on{border-color:var(--acc);font-weight:700}.dx-field{display:grid;gap:7px;margin:15px 0}.dx-field input{font:inherit;padding:12px;border-radius:8px;border:1px solid var(--line);color:var(--ink);background:var(--card);width:100%;min-width:0}.dx-status{min-height:1.7em;font-size:14px;color:var(--ink-2)}.dx-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.dx-info-grid button{font-size:14px}.dx-link{color:var(--acc);font-weight:700}.dx-stars{display:flex;gap:12px}.dx-stars button{border:0;background:none;color:var(--acc);font-size:32px;cursor:pointer;min-width:40px}.dx-qr{width:100px;height:100px;margin:20px auto;background:repeating-conic-gradient(var(--ink) 0 25%,transparent 0 50%) 50% / 14px 14px;border:10px solid var(--card)}.dx-list{padding-inline-start:20px}.dx-list li{margin:8px 0}.dx-hidden{display:none!important}.demo-switch~.wrap .loyal__bar i{transition:width .3s}.dx-button:disabled{opacity:.5;cursor:default}.dx-button:focus-visible,.dx-tabs button:focus-visible,#demo-dialog button:focus-visible{outline:3px solid var(--ink);outline-offset:3px}#demo-dialog textarea{resize:none}.sheet__panel:focus{outline:none}.search-clear{min-width:40px;min-height:40px;border:0;background:transparent;color:var(--ink);font-size:22px;cursor:pointer}
@media(max-width:500px){.demo-switch{gap:2px;padding:5px 6px;font-size:12px}.demo-switch a{padding:7px 6px;min-height:42px;gap:4px;flex:1}.demo-switch img{width:16px;height:16px}.demo-switch .demo-switch__home{flex:0 0 34px;padding:5px;font-size:23px}.topbar{gap:7px;padding-inline:12px}.topbar .brand b{font-size:15px}.topbar .brand small{display:none}.topbar .brand img{width:25px;height:25px}.hello__title{font-size:28px;line-height:1.35}#demo-dialog{padding:20px}.demo-dialog__head h2{font-size:22px}.dx-progress li{font-size:11px}.dx-info-grid{grid-template-columns:1fr 1fr}.dx-tabs button{flex:1 1 auto;padding-inline:10px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

.demo-shortcuts{display:flex;gap:7px;overflow-x:auto;padding:4px 0 12px;margin-bottom:6px;scrollbar-width:thin}.demo-shortcuts a,.demo-shortcuts button{display:inline-flex;align-items:center;justify-content:center;flex:none;min-height:42px;padding:9px 13px;border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--ink);font:600 13px/1.5 system-ui,sans-serif;text-decoration:none;cursor:pointer}.demo-shortcuts>*:hover{border-color:var(--acc)}.demo-shortcuts>*:focus-visible{outline:3px solid var(--acc);outline-offset:1px}
