.manso-reels{display:block;max-width:1050px;margin:0 auto;color:#f5f5f7}
.reel-device{position:relative;width:100%;aspect-ratio:2/3;isolation:isolate}
.reel-hand{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.reel-screen{position:absolute;left:28.05%;top:10.8%;width:43.55%;height:61.4%;overflow:hidden;border-radius:13% / 6.2%;background:#000;display:flex;flex-direction:column;color:#fff}
.reel-status{position:relative;display:flex;align-items:center;justify-content:space-between;height:7%;flex-shrink:0;padding:0 7%;font:600 clamp(7px,1vw,11px)/1 sans-serif}
.reel-island{position:absolute;left:35%;width:30%;height:46%;top:17%;border-radius:20px;background:#0b0b0c;box-shadow:inset 0 0 0 1px #ffffff08}
.reel-feed{position:relative;flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none;outline-offset:-3px!important;background:#000;touch-action:pan-y}
.reel-feed::-webkit-scrollbar{display:none}
.reel-feed:focus-visible{outline:2px solid #c8adff}
.reel-feed .manso-reel{position:relative;display:block;width:100%;height:100%;scroll-snap-align:start;scroll-snap-stop:always;margin:0;padding:0;background:#000}
.manso-reel video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
.reel-screen-bottom{height:5%;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 8%;font:600 clamp(6px,.85vw,9px)/1 sans-serif;letter-spacing:.18em}
.reel-screen-bottom:after{content:"";position:absolute;bottom:1%;left:36%;width:28%;height:.45%;border-radius:10px;background:#fff8}
.reel-desk{padding:0 12px 30px;text-align:center;min-width:0}
.reel-desk .reel-invitation{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#aaa1b8;margin:0 0 17px;line-height:1.5}
.reel-desk .reel-client{font-size:clamp(25px,3vw,38px);font-weight:650;line-height:1.12;letter-spacing:-.045em;color:#f5f5f7;margin:0 0 20px}
.reel-desk .reel-hint{font-size:14px;color:#a1a1a6;line-height:1.65;margin:0 0 26px}
.reel-navigation{display:flex;align-items:center;gap:18px;margin:0 0 22px}
.reel-navigation button{border:1px solid #ffffff30;border-radius:50%;width:44px;height:44px;font:400 20px/1 sans-serif;background:#ffffff08;color:#eee;cursor:pointer}
.reel-navigation button:hover:not(:disabled){background:#ffffff20}
.reel-navigation button:disabled{opacity:.25;cursor:default}
.reel-navigation span{font-variant-numeric:tabular-nums;font-size:12px;color:#bbb;min-width:50px;text-align:center}
.reel-playback{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.reel-playback button{font:inherit;font-size:11px;min-height:42px;border:1px solid #ffffff30;border-radius:24px;padding:10px 14px;background:#ffffff08;color:#ddd;cursor:pointer}
.reel-playback button:hover{background:#ffffff18}
.reel-desk .reel-original{font-size:11px;color:#a1a1a6;text-decoration:none;display:inline-flex;min-height:36px;align-items:center}
.reel-desk .reel-original:hover{color:#fff}
.reel-desk .reel-error{font-size:12px;line-height:1.6;color:#d7c7e8;margin:0 0 12px}
.unit-page .comm-reels-stage{padding:0 var(--gutter) 70px;margin:auto;max-width:1250px}
.unit-page .comm-landing-preview:has(.manso-reels){max-width:1000px}
@media(max-width:700px){.manso-reels{grid-template-columns:minmax(0,1fr);gap:0;max-width:520px}.reel-device{width:100%;max-width:460px;justify-self:center}.reel-desk{padding:0 12px 30px;margin-top:-10px;text-align:center}.reel-desk .reel-invitation{display:none}.reel-desk .reel-client{font-size:25px;margin-bottom:12px}.reel-desk .reel-hint{font-size:12px;margin-bottom:18px}.reel-hint br{display:none}.reel-navigation,.reel-playback{justify-content:center}.reel-navigation{margin-bottom:15px}.reel-playback{margin-bottom:7px}.reel-status{font-size:8px}.reel-screen-bottom{font-size:7px}.unit-page .comm-reels-stage{padding:0 5px 45px}.unit-page .comm-landing-preview:has(.manso-reels){width:calc(100% + 32px);max-width:none;margin-inline:-16px}}
@media(prefers-reduced-motion:reduce){.reel-feed{scroll-behavior:auto}}

.reel-showcase{position:relative;width:100%;max-width:620px;margin:auto}
.reel-side-arrow{position:absolute;z-index:3;top:42%;width:44px;height:44px;border:1px solid #ffffff40;border-radius:50%;background:#151518b3;color:#eee;font:400 22px/1 sans-serif;cursor:pointer;backdrop-filter:blur(10px)}
.reel-arrow-prev{left:6%}.reel-arrow-next{right:6%}
.reel-side-arrow:hover:not(:disabled){background:#ffffff25}.reel-side-arrow:disabled{opacity:.25;cursor:default}
.reel-desk .reel-navigation,.reel-desk .reel-playback{justify-content:center}
.reel-desk .reel-navigation{margin-bottom:16px}