/* Requested compact hero and the supplied MagicBento's mixed-size grid. */
.sky-demo.is-home .pro-copy .hero-proof { position:relative; inset:auto; width:100%; max-width:490px; margin:20px 0 0; }
.sky-demo.is-home .pro-copy .agency-actions { margin-bottom:0; }
.sky-demo .magic-albums { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:auto minmax(190px,auto) minmax(160px,auto); gap:12px; }
.sky-demo .magic-albums .direction-heading { grid-column:1/-1; margin:0 0 5px; }
.sky-demo .magic-albums .album-grid,.sky-demo .magic-albums .feishu-library { display:contents; }
.sky-demo .magic-albums .album-card { min-height:0; padding:22px; border-radius:20px; gap:0; }
.sky-demo .magic-albums .album-card:first-child { grid-column:1/3; grid-row:2/4; padding:28px; background:linear-gradient(140deg,#dcecc7,#edf5e2); }
.sky-demo .magic-albums .album-card:nth-child(2) { grid-column:3; grid-row:2; }
.sky-demo .magic-albums .album-card:nth-child(3) { grid-column:4; grid-row:2; background:linear-gradient(145deg,#e7f0dd,#f8fbf4); }
.sky-demo .magic-albums .album-count { font-size:10px; letter-spacing:0; padding:4px 8px; }
.sky-demo .magic-albums .album-card h4 { margin:20px 0 9px; font-size:19px; line-height:1.4; }
.sky-demo .magic-albums .album-card:first-child h4 { margin-top:auto; font-size:28px; }
.sky-demo .magic-albums .album-card h4 span { width:26px; height:26px; font-size:14px; }
.sky-demo .magic-albums .album-card p { font-size:12px; line-height:1.75; margin:0 0 17px; }
.sky-demo .magic-albums .album-card:first-child p { max-width:340px; font-size:13px; }
.sky-demo .magic-albums .album-action { display:block; font-size:11px; }
.sky-demo .magic-albums .album-card:first-child .album-action { margin-top:6px; }
.sky-demo .magic-albums .feishu-link { grid-column:3/5; grid-row:3; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:10px; padding:22px; border-radius:20px; background:linear-gradient(115deg,#e0edce,#eff6e7); }
.sky-demo .magic-albums .feishu-kicker { font-size:10px; letter-spacing:.8px; color:#648455; }
.sky-demo .magic-albums .feishu-link strong { width:100%; font-size:22px; color:#294e36; }
.sky-demo .magic-albums .feishu-link strong b { float:right; font-weight:400; }
.sky-demo .magic-albums .feishu-link>span:last-child { font-size:12px; line-height:1.7; max-width:380px; color:#65765e; }
.sky-demo .bento-art { display:block; width:205px; max-width:60%; margin:13px 0 12px auto; pointer-events:none; color:#668d50; }
.sky-demo .bento-art svg { display:block; width:100%; height:auto; overflow:visible; }
.sky-demo .bento-art rect { fill:#f5faee99; stroke:#83a76988; stroke-width:1.4; }
.sky-demo .bento-art rect:nth-child(3) { fill:#edf6e4; stroke:#6e9754; }
.sky-demo .bento-art path { fill:#87ac69; stroke:#719757; stroke-width:1.5; stroke-linejoin:round; }
.sky-demo .bento-star { position:absolute; width:3px; height:3px; background:#6c9c51; border-radius:50%; box-shadow:0 0 6px #82ab6190; pointer-events:none; z-index:3; }
@media(min-width:801px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
 .sky-demo .magic-albums .sky-bento,.sky-demo .magic-albums .sky-bento:hover { transform:perspective(950px) translate3d(calc(var(--bento-x,0)*1px),calc(var(--bento-y,0)*1px),0) rotateX(calc(var(--bento-rx,0)*1deg)) rotateY(calc(var(--bento-ry,0)*1deg))!important; }
}
@media(min-width:801px) {
 .sky-demo.is-home .pro-intro { min-height:650px; padding-top:90px; padding-bottom:118px; }
 .sky-demo.is-home .pro-copy { align-self:start; }
 .sky-demo.is-home .pro-portrait { height:440px; align-self:start; }
 .sky-demo.is-home .pro-portrait>img { height:530px; bottom:-54px; }
 .sky-demo .portrait-label { top:-18px; bottom:auto; right:0; font-size:10px; padding:9px 12px; }
 .sky-demo .hero-shortcuts { inset:auto max(6%,calc((100vw - 1160px)/2)) 22px auto; width:min(362px,36%); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px 16px; }
 .sky-demo .hero-shortcut { position:relative; inset:auto; --shortcut-rotate:0deg; }
 .sky-demo .hero-shortcut-inner { min-width:0; width:100%; height:42px; padding:0 13px; gap:8px; }
}
@media(min-width:801px) and (max-width:1100px) {
 .sky-demo.is-home .pro-intro { padding-top:85px; padding-bottom:110px; }
 .sky-demo.is-home .pro-portrait>img { height:470px; bottom:-40px; right:-30px; }
 .sky-demo .hero-shortcuts { right:5%; width:36%; }
 .sky-demo .hero-shortcut-inner { font-size:11px; padding:0 10px; }
 .sky-demo .magic-albums .album-card { padding:18px; }
 .sky-demo .magic-albums .album-card h4 { font-size:17px; }
 .sky-demo .magic-albums .album-card:first-child h4 { font-size:25px; }
}
@media(max-width:800px) {
 .sky-demo.is-home .pro-copy .hero-proof { margin-top:18px; max-width:none; }
 .sky-demo .hero-shortcuts { width:min(400px,100%); align-self:center; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 12px; margin:0; }
 .sky-demo .hero-shortcut-inner { height:37px; font-size:11px; }
 .sky-demo .magic-albums { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:auto auto auto auto; gap:10px; }
 .sky-demo .magic-albums .album-card:first-child { grid-column:1/3; grid-row:2; min-height:232px; padding:22px; }
 .sky-demo .magic-albums .album-card:nth-child(2) { grid-column:1; grid-row:3; }
 .sky-demo .magic-albums .album-card:nth-child(3) { grid-column:2; grid-row:3; }
 .sky-demo .magic-albums .album-card { padding:17px; }
 .sky-demo .magic-albums .album-card h4 { font-size:17px; margin:16px 0 8px; }
 .sky-demo .magic-albums .album-card:first-child h4 { margin-top:54px; font-size:24px; }
 .sky-demo .magic-albums .bento-art { position:absolute; right:15px; top:25px; width:148px; max-width:40%; opacity:.7; }
 .sky-demo .magic-albums .album-card p { font-size:11px; margin-bottom:13px; }
 .sky-demo .magic-albums .album-card:first-child p { font-size:12px; }
 .sky-demo .magic-albums .album-count { font-size:9px; padding:4px 6px; }
 .sky-demo .magic-albums .album-card h4 span { display:none; }
 .sky-demo .magic-albums .album-action { font-size:10px; }
 .sky-demo .magic-albums .feishu-link { grid-column:1/3; grid-row:4; min-height:138px; padding:20px; }
 .sky-demo .magic-albums .feishu-link strong { font-size:20px; }
}