/* Use the actual app's responsive layout at smaller website widths. */
@media(max-width:700px){.collection-design .collection-sidebar{width:62px;padding-inline:7px}.collection-design{grid-template-columns:62px minmax(0,1fr)!important}.collection-brand{padding:20px 5px!important}.collection-brand .brand>span:last-child,.collection-nav>span,.collection-current{display:none!important}.collection-brand .brand-icon{width:32px;height:32px}.collection-nav{justify-content:center;padding:12px 0!important}.collection-sidebar-bottom{padding-inline:0!important}.collection-toolbar{padding-inline:16px!important}.collection-content{padding:25px 18px!important}.collection-page-heading h1{font-size:24px!important}.collection-toolbar-label{display:none}.collection-toolbar .search{max-width:125px}.collection-toolbar .search input{width:100%}.collection-toolbar .button{font-size:10px}.collection-detail-layout{grid-template-columns:1fr!important;gap:28px!important}.cursor-gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:9px!important}.cursor-gallery-card{min-height:150px!important;padding:12px 5px!important}.cursor-gallery-card h3{font-size:10px!important}.cursor-gallery-card p{font-size:8px!important}.cursor-gallery-art{height:78px!important}.cursor-gallery-art img{max-width:45px!important;max-height:45px!important}.collection-detail-controls{max-width:none!important}.native-store-empty{margin-top:25px}.collection-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.settings-wrap{width:100%}.settings-group .detail-row{flex-wrap:wrap;gap:12px}}
@media(max-width:420px){.collection-design{grid-template-columns:52px minmax(0,1fr)!important}.collection-design .collection-sidebar{width:52px;padding-inline:4px}.collection-content{padding-inline:13px!important}.collection-toolbar{padding-inline:13px!important}.back-button{font-size:9px}.collection-page-heading h1{font-size:20px!important}.collection-page-heading{gap:9px!important}.collection-pack-actions{padding:3px!important;gap:0!important}.collection-pack-actions button{width:27px!important;height:27px!important}.collection-pack-actions svg{width:17px!important}.cursor-gallery-grid{gap:6px!important}.cursor-gallery-card p{font-size:7px!important}.cursor-gallery-card h3{font-size:9px!important}.collection-brand .brand{gap:0}.collection-toolbar .button{padding:7px 9px!important}.collection-toolbar .search{max-width:105px}.collection-toolbar>div{gap:7px}.collection-grid{grid-template-columns:1fr!important}}
@media(max-width:820px){.collection-detail-controls{display:block!important}.collection-detail-controls .studio-inspector{width:100%}}
@media(max-width:700px){.collection-design .collection-sidebar{flex-shrink:0}.collection-page-heading{align-items:flex-start!important}.collection-detail .collection-page-heading{flex-direction:row!important}.collection-detail .collection-page-heading>div:first-child{min-width:0}.collection-pack-actions{flex-shrink:0}.collection-toolbar .button .icon{display:inline-block}}

/* Keep the category selector as one swipeable row, but let the visible shell
   own the phone-width background. Equal-width cells match the liquid
   indicator's geometry, so its fill stays centered under every label. */
@media(max-width:700px){.collection-category-scroll{width:100%;margin:0;padding:0;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:inline proximity;scroll-padding-inline:4px;border-radius:24px;background:#f5f1eb}.collection-category-scroll .studio-segments{width:max-content;min-width:100%;background:transparent}.collection-category-scroll .studio-segment-liquid{transform:translateX(2px)}.collection-category-scroll .studio-segments>button{flex:0 0 70px;scroll-snap-align:start;padding:0 6px;font-size:10px;gap:5px}}
@media(max-width:420px){.collection-category-scroll .studio-segments>button{flex-basis:64px;padding:0 4px;font-size:9px;gap:4px}}

/* Keep the app's mascot framing while displaying the shared live Blender rig. */
.browser-mascot.buddy-character{mix-blend-mode:normal;overflow:visible;padding:0;background:none}
.browser-mascot model-viewer{display:block;width:100%;height:100%;pointer-events:none;--poster-color:transparent;--progress-bar-color:transparent}
.native-store-empty>.browser-mascot{width:130px;height:130px;margin:0 auto}

/* Native-style import confirmation, with an in-browser sample instead of a file picker. */
.demo-import-preview{display:flex;justify-content:center;align-items:center;gap:18px;padding:24px 12px;margin:20px 0;background:var(--surface,#f3f0eb);border-radius:18px}
.demo-import-preview img{object-fit:contain;width:56px;height:56px}
@media(max-width:420px){.demo-import-preview{gap:9px}.demo-import-preview img{width:46px;height:46px}}

/* Shared Pungo link cursor. Keep text inputs and drag surfaces in their own roles. */
@media (hover:hover) and (pointer:fine){
 :where(:is(a[href],button,input[type="button"],input[type="submit"],input[type="reset"],input[type="checkbox"],input[type="radio"],select,summary,label[for],[role="button"],[role="switch"],[role="tab"],[role="radio"],[role="option"],[role="combobox"]):not(:disabled):not([aria-disabled="true"]):not(.note-drag):not(.cursor-demo-surface)), :where(:is(a[href],button,input[type="button"],input[type="submit"],input[type="reset"],input[type="checkbox"],input[type="radio"],select,summary,label[for],[role="button"],[role="switch"],[role="tab"],[role="radio"],[role="option"],[role="combobox"]):not(:disabled):not([aria-disabled="true"]):not(.note-drag):not(.cursor-demo-surface)) :where(*){
  cursor:url("../assets/pungo-link-v1@1x.png") 17 3,pointer!important;
  cursor:image-set(url("../assets/pungo-link-v1@1x.png") 1x,url("../assets/pungo-link-v1@2x.png") 2x) 17 3,pointer!important;
 }
}
/* The button owns mascot interaction; its decorative viewer must not replace the cursor. */
button.buddy-stage model-viewer{pointer-events:none}

/* A pack preview fills the website's modal, without a second frame or app shell. */
html[data-pack-embed],html[data-pack-embed] body{background:#fffcf7;overflow:hidden}
html[data-pack-embed] #stage{visibility:hidden}
html[data-pack-embed] #modal:has(.store-preview){inset:0;margin:0;width:100%;height:100%;max-height:100%;border:0;border-radius:0;box-shadow:none;overflow:auto;overscroll-behavior:contain}
html[data-pack-embed] #modal::backdrop{background:#fffcf7;backdrop-filter:none}
html[data-pack-embed] .store-preview-heading [data-action=dismiss]{display:none}
html[data-pack-embed] .store-action{display:none}
@media(max-width:380px){html[data-pack-embed] .store-preview-states{grid-template-columns:repeat(3,minmax(0,1fr))}html[data-pack-embed] .store-preview-footer{flex-direction:column}html[data-pack-embed] .store-preview-footer>p{max-width:none}}

/* In "Try it yourself" the pack's own cursor is drawn by the demo; hide the site's cursor there. */
@media (pointer:fine){
 #modal .store-preview-stage.is-interactive,#modal .store-preview-stage.is-interactive *{cursor:none!important}
}

/* Page-wide default; controls, text fields, drag gestures and demo packs keep their own cursor roles. */
@media (hover:hover) and (pointer:fine){
 html,body{
  cursor:url("../assets/cursor-choices/pungo-pointer-tilted-v2@1x.png") 11 8,default;
  cursor:image-set(url("../assets/cursor-choices/pungo-pointer-tilted-v2@1x.png") 1x,url("../assets/cursor-choices/pungo-pointer-tilted-v2@2x.png") 2x) 11 8,default;
 }
}