.demo-preview{min-width:0;container:demo-shell / inline-size}.demo-preview-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;margin-bottom:24px}.demo-preview-controls>.ld-island,.demo-preview-controls>.ad-day-island{margin:0}.demo-device-island{display:flex;flex-shrink:0;gap:4px;padding:6px;border:1px solid #d8dfcf;border-radius:999px;background:#e8ecdf;box-shadow:0 6px 16px #17241f08}.demo-device-island button{display:inline-flex;justify-content:center;align-items:center;gap:8px;min-height:46px;padding:10px 17px;border-radius:999px;color:#4a584c;background:transparent;font-size:12px;font-weight:750}.demo-device-island button[aria-pressed=true]{color:#fff;background:var(--am-pine);box-shadow:0 3px 8px #17241f18}.demo-device-island button:hover:not([aria-pressed=true]){background:#f5f6ef}.demo-preview-controls button:focus-visible{outline:3px solid #426339;outline-offset:3px}.demo-preview-viewport{position:relative;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:2px}.demo-device{width:100%}.demo-preview-frame{width:100%;margin-inline:auto;container:demo-preview / inline-size}.demo-preview[data-device=mobile] .demo-preview-frame{width:min(390px,100%)}.demo-preview-screen{min-width:0}.demo-preview[data-device=desktop] .demo-device,.demo-preview[data-device=desktop] .demo-preview-screen,.demo-preview[data-device=desktop] .demo-preview-frame{min-width:1040px}.demo-preview[data-layout=desktop] .demo-device{overflow:hidden;border-radius:16px;background:var(--am-pine);box-shadow:0 28px 60px #17241f16}.demo-window-bar{display:flex;align-items:center;gap:7px;height:38px;padding:0 16px}.demo-window-bar span{width:8px;height:8px;border-radius:50%;background:var(--am-lime)}.demo-window-bar span:nth-child(2){background:#9bb58a}.demo-window-bar span:nth-child(3){background:#4d6556}.demo-preview[data-layout=mobile] .demo-device{position:relative;display:flex;flex-direction:column;width:min(418px,100%);height:min(912px,calc(100svh - 11.5rem));margin-inline:auto;padding:16px 14px;overflow:hidden;border-radius:40px;background:var(--am-pine);box-shadow:0 30px 60px #17241f1f,inset 0 0 0 1px #ffffff1a,inset 0 1px #ffffff2e}.demo-preview[data-layout=mobile] .demo-preview-screen{flex:1;min-width:0;min-height:0;overflow:hidden;border-radius:28px;background:#fff}.demo-preview[data-layout=mobile] .demo-preview-frame{width:100%;height:100%;overflow:auto;overscroll-behavior:contain;scrollbar-width:none}.demo-preview[data-layout=mobile] .demo-preview-frame::-webkit-scrollbar{display:none;width:0;height:0}.demo-preview[data-layout] :is(.ld-workspace,.ad-day-workspace){border:0;border-radius:0;box-shadow:none}.demo-preview-scroll-hint{display:none;margin:0 0 12px;text-align:center;color:#5d6b54;font-size:11px;line-height:1.7}@container demo-shell (max-width: 1039px){.demo-preview[data-device=desktop] .demo-preview-scroll-hint{display:block}}@media(max-width:760px){.demo-preview-controls{gap:10px}.demo-preview[data-device=auto] .demo-preview-frame{width:min(390px,100%)}.demo-device-island{padding:4px}.demo-device-island button{min-height:44px;padding:8px 16px}}