html{scroll-padding-top:100px;-webkit-text-size-adjust:100%}
body.site-home,body.site-beads{padding-bottom:env(safe-area-inset-bottom,0px)}
.site-home .gen-grid>*,.site-home .prod-grid>*,.site-home .panel{min-width:0}
.site-home .upload-row,.site-home .gen-status,.site-home .beast-desc{overflow-wrap:anywhere}
.site-home .modal-box{max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);overflow:auto;overscroll-behavior:contain}
.site-home button,.site-home a,.site-home .chip,.site-home .tile,.site-home .toggle-opt{touch-action:manipulation}
.mobile-jumps{display:none}
html:has(body.site-beads){scroll-padding-top:16px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media(max-width:1100px){
  html{scroll-padding-top:calc(132px + env(safe-area-inset-top,0px))}
  html .site-home #nav,html .site-home #nav.scrolled{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;padding:calc(10px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 6px max(16px,env(safe-area-inset-left,0px));background:rgba(247,244,238,.97);border-bottom:1px solid var(--line)}
  .site-home #nav .brand{font-size:18px;gap:8px;min-width:0}
  .site-home #nav .nav-actions{gap:6px;grid-column:2;grid-row:1}
  .site-home #nav .language-toggle,.site-home #nav .settings-btn{width:44px;height:44px;margin:0}
  .site-home #nav .nav-cta{min-height:44px;display:flex;align-items:center}
  html .site-home #nav .nav-links{display:flex;grid-column:1/-1;grid-row:2;gap:8px;overflow-x:auto;min-width:0;max-width:100%;white-space:nowrap;scrollbar-width:thin}
  .site-home #nav .nav-links a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 12px;flex-shrink:0;font-size:14px}
  .site-home #wall{padding-top:calc(152px + env(safe-area-inset-top,0px))}
}
@media(max-width:900px){
  .site-home section.feature{padding:80px 0}
  .site-home .wrap{padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
  .site-home .gen-grid,.site-home .prod-grid{gap:24px}
  .site-home .panel{padding:26px}
  .site-home .sec-head{margin-bottom:32px}
  .site-home .wall-intro{margin-bottom:40px}
  .site-home .chip,.site-home .toggle-opt{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .site-home input,.site-home select,.site-home textarea.prompt{font-size:16px}
  .site-home .modal-actions button,.site-home .detail-btn,.site-home .beast-detail-close{min-height:44px}
  .site-home .beast-detail-mask{padding:12px}
  .site-home .beast-detail-card{max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);width:100%;grid-template-columns:1fr;overflow:auto;overscroll-behavior:contain}
  .site-home .beast-detail-media{min-height:0}
  .site-home .beast-detail-media img{height:auto;max-height:48vh;object-fit:contain}
  .site-home .beast-detail-copy{overflow:visible;padding:24px}
  .site-home .beast-detail-close{position:fixed;top:max(20px,env(safe-area-inset-top,0px));right:max(20px,env(safe-area-inset-right,0px));width:44px;height:44px;z-index:2;box-shadow:0 2px 12px #0002}
  .site-beads main{padding:24px max(16px,env(safe-area-inset-right,0px)) 32px max(16px,env(safe-area-inset-left,0px))}
  .site-beads .workspace{grid-template-columns:1fr;gap:28px}
  .site-beads aside{padding:0 0 20px;border-right:0;border-bottom:1px solid var(--line)}
  .site-beads .source{height:180px}
  .site-beads .mobile-jumps{display:flex;gap:12px;margin:-8px 0 24px}
  .site-beads .mobile-jumps a{flex:1;min-height:44px;display:flex;align-items:center;justify-content:center;padding:8px;border:1px solid var(--line);border-radius:6px;background:#fffdf8;text-align:center}
  .site-beads #beadSettings,.site-beads #beadPreview{scroll-margin-top:16px}
  .site-beads .tools{width:100%}
  .site-beads .tools button{height:auto;min-height:44px;padding:8px 12px;flex:1;font-size:14px}
  .site-beads .tools .check{min-height:44px}
  .site-beads .zoom-bar button{min-width:44px;min-height:44px}
  .site-beads .zoom-bar .sub{flex-basis:100%}
  .site-beads .board{min-height:240px;max-height:65vh;max-height:65dvh;padding:8px;overscroll-behavior-x:contain;touch-action:pan-x pan-y pinch-zoom}
  .site-beads .check{min-height:44px;margin:6px 0}
  .site-beads input[type=checkbox]{width:20px;height:20px;flex:none}
  .site-beads input[type=range]{min-height:36px}
  .site-beads select{font-size:16px;min-height:44px}
  .site-beads .bead-file-picker{min-height:44px;display:inline-flex;align-items:center}
  .site-beads details summary{min-height:44px;padding:10px 0}
  .site-beads .locks{grid-template-columns:repeat(auto-fit,minmax(44px,1fr));gap:10px}
  .site-beads .lock-color{width:44px;height:44px}
  .site-beads .language-toggle{width:44px;height:44px;margin:0}
  .site-beads .language-nav-actions a{min-height:44px;display:flex;align-items:center}
}
@media(max-width:600px){
  .site-home #nav .nav-cta{display:none}
  .site-home #nav .brand{font-size:17px}
  .site-home #nav .nav-links{gap:0}
  .site-home #nav .nav-links a{padding:0 10px}
  .site-home section.feature{padding:56px 0}
  .site-home .wrap{padding-left:16px;padding-right:16px}
  .site-home .wall-intro h1,html[lang=en] .site-home .wall-intro h1{font-size:clamp(34px,10vw,46px)}
  .site-home .wall-intro p.sub{font-size:15px;line-height:1.8;margin-bottom:24px}
  .site-home .eyebrow{margin-bottom:16px;font-size:11px}
  .site-home .hero-actions{flex-wrap:wrap;gap:12px 18px}
  .site-home .hero-actions .link-quiet{min-height:44px;display:flex;align-items:center}
  .site-home .btn-primary{padding:13px 20px}
  .site-home .filter-row{gap:8px;margin-bottom:20px}
  .site-home .chip{padding:8px 13px}
  .site-home .masonry{columns:2;column-gap:12px}
  .site-home .g-card{border-radius:16px;margin-bottom:12px}
  .site-home .g-body{padding:12px 10px}
  .site-home .g-name{font-size:14px;overflow-wrap:anywhere}
  .site-home .g-meta{flex-wrap:wrap;gap:6px;font-size:11px}
  .site-home .panel{padding:20px;border-radius:20px}
  .site-home .preview-card{padding:24px 16px;min-height:300px;border-radius:20px}
  .site-home .preview-result .beast-tag{flex-wrap:wrap;justify-content:center}
  .site-home .to-product{min-height:44px;margin:12px 6px 0;display:inline-flex;align-items:center}
  .site-home .source-toggle{flex-direction:column;gap:8px;margin-bottom:20px}
  .site-home .toggle-opt{padding:12px;text-align:center}
  .site-home .product-tiles{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:24px}
  .site-home .tile .t-name{overflow-wrap:anywhere}
  .site-home .product-preview,.site-home #productPreviewMedia,.site-home #productPreviewMedia .product-default-img{min-height:260px}
  .site-home .modal-mask{padding:12px}
  .site-home .modal-box{padding:24px 20px;border-radius:20px;max-height:calc(100dvh - 24px)}
  .site-home .modal-actions{position:sticky;bottom:-24px;background:var(--paper-card);padding:12px 0}
  .site-home .foot-links{flex-wrap:wrap;gap:12px 24px}
  .site-home .foot-links a{display:flex;align-items:center;min-height:44px}
  .site-home footer{padding:36px 0 24px}
  html .site-beads nav{padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px;gap:8px 12px;flex-wrap:wrap}
  html .site-beads .brand{font-size:17px}
  .site-beads .language-nav-actions{margin-left:auto;gap:8px;justify-content:flex-end}
  .site-beads .language-nav-actions a{font-size:13px}
  .site-beads h1{font-size:28px;margin-bottom:24px}
}
@media(max-width:360px){
  .site-home .masonry{columns:1}
  .site-home #nav .brand{font-size:16px}
  .site-home .product-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .site-beads .tools .check{width:100%}
}
@media(hover:none){
  .site-home .g-card:hover,.site-home .tile:hover,.site-home .btn-primary:hover{transform:none}
}