.micro-inset{position: absolute; bottom: 36px; left: 30px; right: 30px; padding: 14px; display: flex; align-items: center; gap: 20px; background: rgb(255, 255, 255); z-index: 2; max-width: 375px; color: var(--ink);}
.micro-inset img{width: 106px; height: 106px; object-fit: cover; border-radius: 50%;}
.micro-inset span{font-size: 10px; line-height: 1.8; letter-spacing: 1.3px; color: var(--muted);}
.micro-inset p{font: 24px Georgia, serif; margin: 8px 0px 0px;}
@media (max-width: 760px){
.micro-inset{bottom: 20px; left: 20px; right: 20px; max-width: 310px; padding: 10px; gap: 15px;}
.micro-inset img{width: 75px; height: 75px;}
.micro-inset p{font-size: 21px;}
}
.micro-inset{left: auto; right: 25px; bottom: 80px; padding: 13px; max-width: 280px; gap: 14px;}
.micro-inset img{width: 75px; height: 75px;}
.micro-inset span{font-size: 10px; letter-spacing: 0.6px;}
.micro-inset p{font-family: Instrument; font-size: 18px; font-weight: 500;}
@media (max-width: 760px){
.micro-inset{right: 20px; bottom: 65px; max-width: 255px; padding: 10px;}
.micro-inset img{width: 63px; height: 63px;}
.micro-inset p{font-size: 17px;}
}
.micro-inset{isolation: isolate; overflow: hidden; left: auto; right: 25px; bottom: 80px; width: 340px; max-width: calc(100% - 50px); min-height: 142px; border-radius: 23px; border: 1px solid rgba(255, 255, 255, 0.88); background: rgba(206, 222, 219, 0.15); padding: 21px; gap: 20px; box-shadow: rgba(3, 20, 8, 0.22) 0px 13px 24px, rgba(255, 255, 255, 0.4) 0px 1px 2px, rgba(255, 255, 255, 0.35) 0px 0px 0px 1px inset; -webkit-backdrop-filter: none; backdrop-filter: none;}
.micro-inset .glass-optics{position: absolute; inset: 0px; width: 100%; height: 100%; pointer-events: none; z-index: 0; border-radius: inherit;}
.micro-inset::before{content: ""; position: absolute; inset: 0px; z-index: 1; pointer-events: none; border-radius: inherit; background: radial-gradient(22px 9px at 18px 10px, rgba(255, 255, 255, 0.96), rgba(255, 249, 214, 0.65) 22%, rgba(255, 255, 255, 0) 100%), radial-gradient(25px 6px at calc(100% - 24px) calc(100% - 5px), rgba(255, 255, 255, 0.72), transparent 100%), linear-gradient(125deg, rgba(235, 249, 255, 0.1), transparent 29%, rgba(11, 32, 19, 0.07) 72%, rgba(244, 248, 255, 0.12)); box-shadow: rgba(255, 255, 255, 0.9) 0px 1px 1px inset, rgba(237, 249, 255, 0.65) 1px 0px 1px inset, rgba(255, 255, 255, 0.8) 0px -1px 1px inset;}
.micro-inset::after{content: ""; position: absolute; inset: 4px; z-index: 2; pointer-events: none; border-radius: 18px; border: 1px solid rgba(239, 250, 255, 0.65); box-shadow: rgba(9, 36, 19, 0.36) 0px 0px 0px 1px, rgba(15, 40, 22, 0.23) 0px 0px 0px 1px inset, rgba(255, 255, 255, 0.12) 0px 0px 0px 3px;}
.micro-inset > .micro-lens,.micro-inset > .micro-copy{position: relative; z-index: 3;}
.micro-inset > .micro-lens{flex: 0 0 92px; width: 92px; height: 92px; border-radius: 50%; padding: 5px; background: linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(228, 241, 221, 0.15) 23%, rgba(21, 44, 22, 0.76) 39%, rgba(248, 255, 239, 0.97) 62%, rgba(43, 67, 38, 0.66) 80%, rgba(255, 255, 255, 0.9)); border: 1px solid rgba(248, 255, 239, 0.85); box-shadow: rgba(6, 27, 9, 0.28) 0px 3px 8px, rgba(18, 49, 20, 0.25) 0px 0px 0px 2px, rgba(245, 255, 234, 0.7) 0px 0px 0px 3px, white 0px 1px 2px inset;}
.micro-inset .micro-lens img{display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 1px solid rgba(12, 31, 20, 0.55); box-shadow: rgba(255, 255, 255, 0.75) 0px 0px 0px 1px;}
.micro-inset .micro-copy{min-width: 0px;}
.micro-inset .micro-copy p{color: white; font-size: 20px; line-height: 1.25; font-weight: 700; margin: 12px 0px 0px; letter-spacing: -0.4px; text-shadow: rgba(5, 21, 12, 0.45) 0px 2px 5px;}
.micro-inset .micro-copy span{color: white; font-size: 11px; line-height: 1.9; letter-spacing: 0.35px; font-weight: 700; text-shadow: rgba(5, 21, 12, 0.6) 0px 1px 3px;}
.micro-inset[data-optics="ready"]{backdrop-filter: none;}
@media (max-width: 760px){
.micro-inset{right: 20px; bottom: 65px; width: 325px; max-width: calc(100% - 40px); padding: 18px; gap: 17px; min-height: 130px; border-radius: 21px;}
.micro-inset::after{border-radius: 16px;}
.micro-inset > .micro-lens{flex-basis: 80px; width: 80px; height: 80px;}
.micro-inset .micro-copy p{font-size: 18px;}
.micro-inset .micro-copy span{font-size: 10px;}
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more){
.micro-inset{background: rgb(245, 249, 240); backdrop-filter: none;}
.micro-inset .glass-optics,.micro-inset::before,.micro-inset::after{display: none;}
.micro-inset .micro-copy p{color: rgb(18, 52, 37); text-shadow: none;}
.micro-inset .micro-copy span{color: rgb(40, 72, 50); text-shadow: none;}
}
.micro-inset{border-radius: 0px;}
.micro-inset::after{border-radius: 0px;}
.micro-inset{min-height: 148px; border-color: rgba(255, 254, 228, 0.93) rgba(235, 255, 249, 0.78) rgba(206, 244, 250, 0.82); box-shadow: rgba(0, 17, 8, 0.44) 0px 17px 24px -8px, rgba(0, 12, 5, 0.38) 0px 5px 7px -3px, rgba(182, 225, 222, 0.5) 1px 2px 0px, rgba(240, 255, 248, 0.32) 0px 0px 0px 1px inset;}
.micro-inset::before{background: radial-gradient(20px 8px at 8px 6px, rgba(255, 255, 255, 0.96), rgba(255, 238, 167, 0.62) 20%, transparent 95%), radial-gradient(15px 4px at calc(100% - 37px) calc(100% - 4px), rgba(255, 255, 255, 0.84), rgba(255, 246, 196, 0.25) 45%, transparent 100%), linear-gradient(118deg, rgba(234, 245, 248, 0.08), transparent 32%, rgba(12, 28, 17, 0.09) 71%, rgba(244, 248, 255, 0.035)); box-shadow: rgba(255, 255, 244, 0.85) 0px 1px 1px inset, rgba(226, 255, 247, 0.65) 1px 0px 0px inset, rgba(212, 244, 246, 0.58) 0px -2px 1px inset;}
.micro-inset::after{inset: 5px 5px 6px; border-width: 1px; border-style: solid; border-color: rgba(246, 246, 200, 0.54) rgba(224, 251, 251, 0.7) rgba(248, 255, 255, 0.75) rgba(223, 241, 224, 0.37); border-image: none; box-shadow: rgba(8, 29, 17, 0.32) 0px 0px 0px 1px, rgba(21, 44, 21, 0.15) 0px 0px 0px 1px inset; background: linear-gradient(135deg, rgba(246, 255, 255, 0.3), transparent 50%) left top / 5px 5px no-repeat, linear-gradient(315deg, rgba(246, 255, 255, 0.35), transparent 50%) right bottom / 5px 5px no-repeat;}
.micro-inset > .glass-edge-light{position: absolute; inset: 0px; z-index: 4; pointer-events: none; background: linear-gradient(135deg, transparent 44%, rgba(255, 255, 245, 0.85) 48%, rgba(244, 255, 255, 0.8) 52%, transparent 57%) left top / 7px 7px no-repeat, linear-gradient(45deg, transparent 42%, rgba(227, 252, 255, 0.65) 49%, transparent 57%) left bottom / 7px 7px no-repeat, linear-gradient(135deg, transparent 40%, rgba(250, 255, 255, 0.7) 49%, transparent 58%) right bottom / 7px 7px no-repeat, linear-gradient(45deg, transparent 43%, rgba(245, 255, 255, 0.6) 50%, transparent 58%) right top / 7px 7px no-repeat;}
.micro-inset .micro-copy > span{display: block; width: 100%; padding-bottom: 9px; border-bottom: 1px solid rgba(237, 244, 213, 0.5);}
.micro-inset .micro-copy p{margin-top: 10px; text-shadow: rgba(3, 20, 11, 0.42) 0px 2px 5px;}
.micro-inset > .micro-lens{background: linear-gradient(145deg, rgba(252, 255, 234, 0.84), rgba(134, 161, 119, 0.06) 24%, rgba(17, 42, 21, 0.52) 41%, rgba(229, 252, 236, 0.83) 63%, rgba(22, 49, 30, 0.53) 81%, rgba(250, 255, 229, 0.84)); box-shadow: rgba(3, 20, 8, 0.26) 0px 4px 8px, rgba(17, 41, 19, 0.55) 0px 0px 0px 1px, rgba(244, 255, 226, 0.61) 0px 0px 0px 2px, rgba(255, 255, 245, 0.91) 0px 1px 2px inset;}
.micro-inset > .micro-lens::after{content: ""; position: absolute; inset: 3px; border-width: 1px; border-style: solid; border-color: rgba(241, 253, 232, 0.67) rgba(241, 253, 232, 0.67) rgba(241, 253, 232, 0.67) rgba(240, 255, 244, 0.23); border-image: none; border-radius: 50%; pointer-events: none;}
@media (max-width: 760px){
.micro-inset{min-height: 138px;}
.micro-inset .micro-copy > span{padding-bottom: 7px;}
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more){
.micro-inset > .glass-edge-light{display: none;}
.micro-inset .micro-copy > span{border-bottom-color: rgb(183, 198, 175);}
}
.micro-inset{width: 420px; max-width: calc(100% - 50px); height: auto; min-height: 0px; aspect-ratio: 3 / 1; padding: 16px 20px; gap: 20px; touch-action: none; user-select: none;}
.micro-inset > .micro-lens{flex-basis: 88px; width: 88px; height: 88px;}
.micro-inset[data-draggable="true"]{cursor: grab;}
.micro-inset[data-dragging="true"]{cursor: grabbing;}
.micro-inset:focus-visible{outline: rgb(230, 244, 187) solid 2px; outline-offset: 5px;}
.micro-inset .micro-lens img{-webkit-user-drag: none;}
@media (max-width: 760px){
.micro-inset{width: 325px; max-width: calc(100% - 40px); height: auto; min-height: 0px; padding: 12px; gap: 14px;}
.micro-inset > .micro-lens{flex-basis: 64px; width: 64px; height: 64px; padding: 4px;}
.micro-inset .micro-copy span{font-size: 9px; line-height: 1.75; padding-bottom: 5px;}
.micro-inset .micro-copy p{font-size: clamp(14px, 4.5vw, 18px); margin-top: 8px; line-height: 1.2;}
}
.micro-inset[data-focus-origin="pointer"]:focus{outline: none;}
.micro-inset[data-focus-origin="keyboard"]:focus{outline: rgb(230, 244, 187) solid 2px; outline-offset: 5px;}
.micro-inset p{font-family: Poppins, Arial, sans-serif !important; font-style: normal;}