/* Original Compagram dark 64px demo bar and full remaining-screen preview. */
:root{font-family:'Century Gothic',Arial,sans-serif;color:#fff;background:#eef1f5;color-scheme:light}
*{box-sizing:border-box}body{margin:0;overflow:hidden}button,a{font:inherit}button{cursor:pointer}a{text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid #57d3ed;outline-offset:3px}
.preview-bar{position:fixed;inset:0 0 auto;z-index:20;background:linear-gradient(135deg,#111a27,#1a2744);padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;height:64px;box-shadow:0 4px 20px #0004}
.pb-left{display:flex;align-items:center;gap:16px;min-width:0}.pb-back{display:grid;place-items:center;color:#ffffffb3;width:30px;height:40px;font-size:25px;flex-shrink:0}.pb-back:hover{color:#fff}.pb-info{min-width:0}.pb-name{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:430px;margin:0}.pb-cat{font-size:11px;color:#ffffff8c;margin:5px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-right{display:flex;align-items:center;gap:12px;flex-shrink:0}.pb-price{font-size:20px;font-weight:800;letter-spacing:-.5px;white-space:nowrap}.pb-price small{font-size:11px;font-weight:400;color:#ffffff8c;letter-spacing:0}.pb-select{background:linear-gradient(135deg,#0069ee,#00b4cd);color:#fff;border:0;padding:0 23px;min-height:42px;border-radius:8px;font-size:13px;font-weight:700;display:inline-flex;align-items:center;gap:10px;white-space:nowrap}.pb-select:hover{box-shadow:0 6px 20px #0069ee59}
.pb-devices{display:flex;align-items:center;gap:3px;background:#ffffff0a;border:1px solid #ffffff26;border-radius:7px;padding:3px}.pb-devices button{border:0;background:transparent;color:#ffffff9c;border-radius:4px;display:grid;place-items:center;width:34px;height:31px}.pb-devices button[aria-pressed=true]{background:#ffffff24;color:#fff}.pb-devices svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5}.pb-direct{display:grid;place-items:center;width:36px;height:38px;color:#ffffffb3;border:1px solid #ffffff26;border-radius:6px;font-size:18px}
.preview-stage{position:fixed;inset:64px 0 0;display:flex;justify-content:center;background:#dfe4eb;overflow:hidden}.preview-device{position:relative;width:100%;height:100%;overflow:hidden;background:white}.preview-device iframe{display:block;position:absolute;inset:0;width:100%;height:100%;border:0;max-width:none;transform-origin:top left;background:white}.preview-device[data-device=tablet],.preview-device[data-device=mobile]{box-shadow:0 0 45px #18263b2b}.pb-status{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}.preview-noscript{position:fixed;z-index:25;bottom:0;left:0;right:0;margin:0;padding:12px;background:#111a27;color:#fff;font-size:12px;text-align:center}.preview-noscript a{color:#a2e2f3;text-decoration:underline}
@media(max-width:1100px){.preview-bar{padding-inline:15px;gap:12px}.pb-name{max-width:280px}.pb-price{font-size:17px}.pb-select{padding-inline:17px;font-size:12px}.pb-right{gap:8px}}
@media(max-width:800px){.pb-devices{display:none}.pb-name{max-width:260px}.pb-price{font-size:16px}.pb-back{width:22px}.pb-left{gap:10px}.pb-direct{display:none}}
@media(max-width:560px){.preview-bar{height:56px;padding-inline:10px;gap:9px}.preview-stage{top:56px}.pb-name{font-size:11px;max-width:150px}.pb-cat{font-size:9px;max-width:150px;margin-top:3px}.pb-price{font-size:14px}.pb-price small{font-size:9px;display:block;margin-top:2px}.pb-select{min-height:35px;padding-inline:11px;font-size:10px;gap:5px}.pb-left{gap:6px}.pb-right{gap:9px}}
@media(max-width:375px){.pb-name,.pb-cat{max-width:111px}.pb-select{padding-inline:8px;font-size:9px}.pb-right{gap:7px}.pb-price{font-size:12px}.pb-back{font-size:20px;width:18px}}