:root{--bg:#fff;--fg:#0c1014;--muted:#737373;--line:#dbdbdb;--button:#efefef;--hover:#e5e5e5;--blue:#0095f6;--link:#00376b;--ring:#d6d6d6;--modal:#fff;color-scheme:light}html[data-theme=dark]{--bg:#0c1014;--fg:#f5f5f5;--muted:#a8a8a8;--line:#303338;--button:#262b31;--hover:#363b41;--link:#a8b9ff;--ring:#363b41;--modal:#16191d;color-scheme:dark}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:20px}body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.45 Arial,Helvetica,sans-serif}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{cursor:pointer;border:0;color:inherit;background:none}button:focus-visible,a:focus-visible{outline:2px solid var(--blue);outline-offset:4px}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.symbols{position:absolute;width:0;height:0;overflow:hidden}p,h1,h2{margin:0}.rail{position:fixed;inset:0 auto 0 0;width:74px;border-right:1px solid var(--line);padding:28px 12px 20px;display:flex;align-items:center;flex-direction:column;background:var(--bg);z-index:10}.brand{font-family:Georgia,serif;font-style:italic;font-weight:bold;font-size:35px;line-height:1;letter-spacing:-4px;padding-right:5px}.rail nav{margin-top:80px;display:grid;gap:17px}.rail a:not(.brand),.rail button{width:48px;height:44px;border-radius:8px;display:grid;place-items:center}.rail a:hover,.rail button:hover{background:var(--button)}.rail nav img{width:26px;height:26px;border-radius:50%;object-fit:cover}.rail-bottom{margin-top:auto;display:grid;gap:12px}.mobile-header,.bottom-nav{display:none}main{max-width:1010px;margin:0 auto;padding:45px 32px 0 74px}.profile{display:grid;grid-template-columns:235px 1fr;grid-template-areas:'photo identity' 'photo stats' 'photo bio' '. actions';column-gap:35px}.portrait{grid-area:photo;position:relative;align-self:center;justify-self:center;width:162px;height:162px;border-radius:50%;padding:0;transform:translateY(-13px)}.portrait img{width:100%;height:100%;object-fit:cover;border-radius:50%;border:1px solid var(--line)}.portrait>span{position:absolute;left:15px;top:-22px;background:var(--bg);box-shadow:0 4px 25px #0001;border:1px solid var(--line);border-radius:17px;padding:8px 12px;font-size:12px;color:var(--muted)}.portrait>span:after{content:'';position:absolute;bottom:-5px;left:21px;width:9px;height:9px;border-radius:50%;background:var(--bg);border:1px solid var(--line)}.identity{grid-area:identity}.handle-row{display:flex;align-items:center;gap:19px;min-height:35px;margin-bottom:5px}h1{font-size:22px;line-height:1.3;font-weight:500}.dots{font-weight:700;letter-spacing:2px;font-size:23px;padding:0 4px}.desktop-theme{margin-left:auto;padding:5px;display:grid;place-items:center}.desktop-theme svg{width:21px;height:21px}.name{font-size:14px;display:block}.stats{grid-area:stats;display:flex;gap:37px;margin:22px 0 20px}.stats>div{display:flex;gap:5px;align-items:baseline}.stats strong{font-size:16px}.stats span{font-size:16px}.bio{grid-area:bio;font-size:14px;line-height:1.55}.category{color:var(--muted)}.profile-link{color:var(--link);font-weight:600;display:flex;align-items:center;gap:5px;margin-top:5px;font-size:14px}.profile-link svg{width:17px;height:17px}.small-pill{display:flex;align-items:center;gap:6px;background:var(--button);padding:4px 10px;border-radius:30px;font-size:12px;margin-top:11px}.profile-actions{grid-area:actions;display:flex;gap:8px;margin-top:21px}.profile-actions>a,.profile-actions>button{border-radius:8px;background:var(--button);padding:8px 17px;min-height:34px;text-align:center;font-size:14px;font-weight:600;flex:1;white-space:nowrap}.profile-actions>a:hover,.profile-actions>button:hover{background:var(--hover)}.blue-button,.profile-actions .blue-button{background:var(--blue);color:#fff;font-weight:600;border-radius:8px;padding:9px 20px;display:inline-block;text-align:center;font-size:14px}.blue-button:hover,.profile-actions .blue-button:hover{background:#1877f2}.highlights{display:flex;gap:36px;padding:40px 37px 37px}.highlights button{padding:0;display:flex;flex-direction:column;align-items:center;gap:10px;min-width:86px;font-size:12px;font-weight:600}.highlight-ring{display:flex;align-items:center;justify-content:center;width:88px;height:88px;border:1px solid var(--ring);border-radius:50%;padding:4px}.highlight-ring img{width:100%;height:100%;border-radius:50%;object-fit:cover}.testimonial-cover>span{width:100%;height:100%;border-radius:50%;background:#252a2f;color:white;font:64px/1.4 Georgia;text-align:center}.highlights button:hover{opacity:.8}.tabs{border-top:1px solid var(--line);display:flex;justify-content:center;gap:70px;height:54px}.tabs button{display:flex;align-items:center;gap:7px;color:var(--muted);border-top:1px solid transparent;margin-top:-1px;font-size:12px;font-weight:600;letter-spacing:1px;padding:0 1px}.tabs svg{width:15px;height:15px}.tabs .active{border-color:var(--fg);color:var(--fg)}.reel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}.reel-tile{position:relative;padding:0;display:block;aspect-ratio:3/4;overflow:hidden;background:var(--button);text-align:left}.reel-tile img{width:100%;height:100%;object-fit:cover;display:block}.tile-reel{position:absolute;right:12px;top:13px;color:#fff;filter:drop-shadow(0 1px 3px #0008);width:23px;height:23px;stroke-width:2.2}.tile-pin{position:absolute;top:14px;left:13px;color:white;width:18px;height:18px;filter:drop-shadow(0 1px 2px #0007)}.tile-meta{position:absolute;bottom:0;left:0;right:0;color:#fff;padding:25px 13px 13px;background:linear-gradient(transparent,#0008);font-size:14px;display:flex;gap:7px;align-items:center}.tile-meta svg{width:18px;height:18px}.tile-hover{position:absolute;inset:0;display:flex;flex-direction:column;gap:9px;justify-content:center;align-items:center;background:#0006;color:#fff;opacity:0;transition:opacity .2s;text-align:center;padding:15px;font-size:16px}.tile-hover svg{width:40px;height:40px}.reel-tile:hover .tile-hover,.reel-tile:focus-visible .tile-hover{opacity:1}footer{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;color:var(--muted);font-size:12px;padding:33px 0}footer button{font-size:12px;padding:0;text-decoration:underline}dialog{padding:0;border:0;color:var(--fg);background:var(--modal);overflow:visible}dialog::backdrop{background:#000b;backdrop-filter:blur(4px)}.dialog-close{position:absolute;right:-43px;top:-4px;color:#fff;width:36px;height:36px;display:grid;place-items:center;z-index:3}.dialog-close svg{width:28px;height:28px}#viewer{width:min(880px,calc(100vw - 150px));max-height:calc(100dvh - 70px)}.viewer-shell{display:grid;grid-template-columns:minmax(0,1fr) 330px;height:min(740px,calc(100dvh - 70px));border-radius:4px;overflow:hidden}#media-stage{background:#000;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}#media-stage iframe{border:0;width:100%;height:100%;background:white}#media-stage img{width:100%;height:100%;object-fit:contain}.embed-loading{position:absolute;inset:0;z-index:0;color:#eee;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:15px;padding:20px;text-align:center}.embed-loading p{font-size:14px;color:#bbb}#media-stage iframe{position:relative;z-index:1}.reel-detail{display:flex;flex-direction:column;min-height:0}.reel-author{padding:18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:11px}.reel-author img{width:34px;height:34px;object-fit:cover;border-radius:50%}.reel-author strong{font-size:14px}.reel-author span{display:block;color:var(--muted);font-size:12px;margin-top:2px}.reel-copy{padding:23px 20px;overflow:auto}.reel-copy h2{font-size:18px;line-height:1.3;margin-bottom:13px}.reel-copy p{font-size:14px;line-height:1.6;white-space:pre-line}.work-tag{font-size:12px;display:block;color:var(--muted);margin-top:17px}.reel-cta{margin-top:auto;border-top:1px solid var(--line);padding:20px;font-size:14px}.reel-cta>a:first-child{color:var(--link);font-weight:600}.reel-cta>p{margin:22px 0 10px;color:var(--muted)}.reel-cta .blue-button{display:block}.reel-prev,.reel-next{position:absolute;top:50%;background:#fff;color:#333;width:32px;height:32px;border-radius:50%;display:grid;place-items:center}.reel-prev{left:-50px;transform:rotate(180deg)}.reel-next{right:-50px}#story{background:transparent;width:min(390px,calc(100vw - 80px));border-radius:9px}.story-card{min-height:610px;max-height:85dvh;overflow:auto;color:white;background:#1a2026;border-radius:9px;padding:17px 21px;position:relative;display:flex;flex-direction:column}.story-progress{display:flex;gap:4px}.story-progress span{height:3px;border-radius:3px;flex:1;background:#ffffff50}.story-progress .current{background:white}.story-author{display:flex;gap:8px;align-items:center;font-size:13px;margin-top:13px}.story-author img{width:30px;height:30px;border-radius:50%}.story-author>span{color:#ddd;font-size:12px;margin-left:auto}.story-body-inner{padding:58px 8px 65px;line-height:1.5}.story-body-inner>span{color:#bdc7ce;font-size:12px;letter-spacing:1.5px}.story-body-inner h2{font-size:32px;line-height:1.12;margin:14px 0 23px;letter-spacing:-.8px}.story-body-inner p{font-size:16px;color:#e2e5e8;margin:14px 0}.story-body-inner img{width:100%;max-height:250px;object-fit:cover;border-radius:3px;margin-bottom:15px}.story-body-inner .note{font-size:13px;color:#a7afb7}.story-body-inner a{margin-top:14px}.story-controls{margin-top:auto;display:flex;justify-content:space-between}.story-controls button{color:white;width:35px;height:35px;background:#ffffff16;border-radius:50%;display:grid;place-items:center}.story-controls #story-prev{transform:rotate(180deg)}#contact{border-radius:16px;padding:34px;width:380px;max-width:calc(100vw - 36px);text-align:center}.contact-close{position:absolute;top:12px;right:12px}.contact-avatar{height:72px;width:72px;border-radius:50%;object-fit:cover;margin:0 auto 17px}#contact h2{font-size:23px}#contact>p{color:var(--muted);font-size:14px;margin:9px 0 24px}.contact-option{display:flex;gap:16px;text-align:left;align-items:center;padding:15px 10px;border-top:1px solid var(--line)}.contact-option:hover{background:var(--button)}.contact-option strong{font-size:15px;display:block}.contact-option small{font-size:13px;color:var(--muted)}@media(min-width:1450px){main{max-width:1110px;padding-top:50px}.profile{max-width:850px;margin:0 auto}.highlights{max-width:850px;margin:0 auto;padding-left:20px;padding-top:45px;padding-bottom:45px}.reel-tile{aspect-ratio:3/4}}@media(max-width:1100px){main{margin-left:74px;padding:35px 30px 0;max-width:1000px}.profile{grid-template-columns:190px 1fr;gap:0 20px}.stats{gap:25px}.portrait{width:150px;height:150px}.highlights{padding-left:25px}.viewer-shell{grid-template-columns:minmax(0,1fr) 290px}.profile-actions>a,.profile-actions>button{padding:8px 12px}}@media(max-width:800px){.profile{grid-template-columns:145px 1fr;gap:0 20px}.portrait{width:120px;height:120px}.stats{gap:18px}.stats>div{display:block}.stats span{font-size:14px}.bio{font-size:13px}.profile-link{font-size:13px}.highlights{gap:24px;padding-left:10px}.highlight-ring{width:78px;height:78px}.tabs{gap:40px}.viewer-shell{grid-template-columns:1fr 260px}.reel-copy{padding:18px}.reel-copy p{font-size:13px}#viewer{width:calc(100vw - 100px)}.reel-prev{left:-39px}.reel-next{right:-39px}}@media(max-width:650px){.rail{display:none}.mobile-header{display:flex;justify-content:space-between;align-items:center;height:58px;padding:0 16px;border-bottom:1px solid var(--line);font-size:22px;font-weight:600;background:var(--bg)}.mobile-header>div{display:flex;gap:16px}.mobile-header button{padding:0;display:grid;place-items:center}.mobile-header svg{width:24px;height:24px}main{margin:0;padding:0;max-width:none}.profile{padding:24px 16px 0;grid-template-columns:95px 1fr;grid-template-areas:'photo identity' 'photo stats' 'bio bio' 'actions actions';column-gap:20px}.portrait{width:90px;height:90px;transform:none;align-self:start;grid-row:1/3}.portrait>span{top:-15px;left:7px;font-size:10px;padding:5px 8px}.handle-row{display:none}.identity{align-self:start;padding-top:3px}.name{font-size:16px}.stats{justify-content:space-between;gap:8px;margin:12px 0 0}.stats>div{display:flex;flex-direction:column;gap:0;min-width:48px}.stats strong{font-size:18px}.stats span{font-size:14px}.bio{margin-top:20px;font-size:14px;line-height:1.45}.profile-link{font-size:14px;margin-top:7px}.small-pill{font-size:12px;padding:4px 9px}.profile-actions{margin-top:18px;gap:6px}.profile-actions>a,.profile-actions>button{font-size:14px;min-height:34px;padding:7px 12px;border-radius:7px}.highlights{gap:20px;justify-content:flex-start;padding:27px 20px 25px;overflow:auto}.highlights button{min-width:68px;font-size:12px;gap:7px}.highlight-ring{width:70px;height:70px;padding:4px}.testimonial-cover>span{font-size:52px}.tabs{height:49px;gap:0;justify-content:space-around;border-top:0;border-bottom:1px solid var(--line)}.tabs button{border-top:0;border-bottom:2px solid transparent;width:25%;justify-content:center;padding-bottom:8px;letter-spacing:0}.tabs .active{border-bottom-color:var(--fg)}.tabs svg{width:25px;height:25px}.tabs span{display:none}.reel-grid{gap:2px}.reel-tile{aspect-ratio:3/4}.tile-reel{width:18px;height:18px;right:8px;top:8px}.tile-pin{width:14px;height:14px;left:8px;top:8px}.tile-meta{font-size:11px;padding:20px 7px 8px;gap:3px}.tile-meta svg{width:13px;height:13px}.tile-hover{display:none}footer{padding:26px 18px 92px;font-size:11px;gap:8px 15px}footer button{font-size:11px}.bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:10;display:flex;justify-content:space-around;align-items:center;height:calc(55px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--bg);border-top:1px solid var(--line)}.bottom-nav>*{display:grid;place-items:center;width:44px;height:44px}.bottom-nav img{width:25px;height:25px;border-radius:50%}#viewer{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0}.viewer-shell{display:flex;flex-direction:column;height:100dvh;border-radius:0}#media-stage{height:calc(100dvh - 158px);flex-shrink:0;background:#000}#media-stage iframe{max-width:480px;height:100%}.reel-detail{height:158px;display:block;padding:12px 16px}.reel-author{display:none}.reel-copy{padding:0}.reel-copy h2{font-size:16px;margin:0 0 3px}.reel-copy p{max-height:20px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:12px}.work-tag{display:none}.reel-cta{display:flex;justify-content:space-between;align-items:center;border:0;padding:12px 0 0;font-size:12px}.reel-cta>p{display:none}.reel-cta .blue-button{font-size:12px;padding:8px 12px}.dialog-close{right:8px;top:8px;background:#0008;border-radius:50%}.reel-prev,.reel-next{top:46%;z-index:3;width:28px;height:28px;background:#ffffffc9}.reel-prev{left:8px}.reel-next{right:8px}#story{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0}.story-card{border-radius:0;min-height:100dvh;max-height:100dvh;padding:18px 20px}.story-author{padding-right:35px}.story-body-inner{padding-top:45px}.story-controls{padding-bottom:10px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
/* Instagram profile refinement */
:root{--accent:#0095f6;--accent-hover:#1877f2;--focus:#0095f6;--rail-width:74px}html[data-theme=dark]{--accent:#fe5400;--accent-hover:#e74d00;--focus:#ff7c3d;--blue:#fe5400;--link:#fe5400;--bg:#0c1014;--modal:#15191e}body{font-family:-apple-system,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}button,input{font-family:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline-color:var(--focus)}h1{font-weight:700;font-size:24px;letter-spacing:-.45px}.profile-actions .blue-button,.blue-button{background:var(--accent);color:#fff}.profile-actions .blue-button:hover,.blue-button:hover{background:var(--accent-hover)}.profile-link{color:var(--link)}.dots{display:grid;place-items:center;width:32px;height:32px;padding:0;border-radius:50%}.dots svg{width:23px;height:23px}.dots:hover{background:var(--button)}.small-pill{width:max-content;max-width:100%;background:transparent;border:1px solid var(--line);font-size:14px;font-weight:600;padding:4px 10px;gap:6px;line-height:1.3}.small-pill svg{width:18px;height:18px;stroke-width:1.7}.small-pill:hover{background:var(--button)}.stats .counter{font-size:inherit;font-weight:inherit;font-variant-numeric:tabular-nums}.stats strong{min-width:2.3ch}.nav-label{display:none}.rail nav{gap:13px}.rail svg{width:24px;height:24px}.tabs{border-top:0;border-bottom:1px solid var(--line);height:53px;gap:0;justify-content:center}.tabs .active{border-top:0;border-bottom:2px solid var(--fg);padding:0 22px;margin:0}.tabs svg{width:24px;height:24px}.tabs span{display:none}.reel-grid{gap:4px;border-radius:8px;overflow:hidden}.reel-tile{border-radius:5px}.tile-reel{fill:currentColor;stroke:none;width:22px;height:22px}.tile-hover{border-radius:5px}.reel-tile.reveal{animation:reel-enter 1.1s cubic-bezier(.22,1,.36,1) both;animation-delay:var(--reel-delay,0ms)}@keyframes reel-enter{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}button,a{transition:background-color .15s,opacity .15s,transform .15s}button:active,.profile-actions a:active{transform:scale(.97)}.reel-tile:active{transform:scale(.992)}.rail-bottom{gap:4px}.rail-bottom button{height:40px}.profile-actions>a,.profile-actions>button{min-height:38px}.bottom-nav button{min-width:44px;min-height:44px}footer [data-sound]{display:flex;gap:5px;align-items:center;text-decoration:none}footer [data-sound] svg{width:15px;height:15px}.contact-option strong{font-weight:600}dialog[open]{animation:dialog-enter .18s ease-out}@keyframes dialog-enter{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}.story-card{font-family:inherit}.story-card .blue-button{background:var(--accent)}
#notifications{position:fixed;inset:0 auto 0 74px;margin:0;width:390px;max-width:calc(100vw - 74px);height:100dvh;max-height:100dvh;border-radius:0 16px 16px 0;border-right:1px solid var(--line);box-shadow:6px 0 24px #0002;overflow:auto;background:var(--bg);animation:panel-enter .24s cubic-bezier(.2,.8,.2,1)}#notifications::backdrop{background:#0002;backdrop-filter:none}@keyframes panel-enter{from{transform:translateX(-22px);opacity:0}to{transform:translateX(0);opacity:1}}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:26px 23px 12px;gap:15px}.panel-header h2{font-size:24px;font-weight:700;letter-spacing:-.6px}.panel-header button{display:grid;place-items:center;min-width:32px;min-height:32px;color:var(--muted)}.panel-intro{font-size:14px;color:var(--muted);padding:0 24px 19px}.feedback-filters{display:flex;gap:7px;padding:0 23px 20px;overflow-x:auto}.feedback-filters button{border:1px solid var(--line);border-radius:24px;padding:7px 14px;font-size:14px;white-space:nowrap}.feedback-filters .selected{background:var(--button);border-color:transparent;font-weight:600}.feedback-group-title{font-size:16px;padding:7px 24px 12px;margin:0}.feedback-row{display:grid;width:100%;grid-template-columns:44px 1fr 48px;gap:12px;text-align:left;padding:18px 23px;align-items:center;border-bottom:1px solid var(--line)}.feedback-row:hover{background:var(--button)}.feedback-avatar{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--button);color:var(--muted);border:1px solid var(--line)}.feedback-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}.feedback-text{font-size:14px;line-height:1.5}.feedback-text strong{font-weight:600}.feedback-text small{display:block;color:var(--muted);font-size:12px;margin-top:3px}.feedback-thumb{width:48px;height:60px;border-radius:6px;object-fit:cover}.feedback-thumb.empty-thumb{display:grid;place-items:center;background:var(--button);border:1px solid var(--line);color:var(--muted)}.feedback-thumb svg{width:22px;height:22px}.panel-note{font-size:12px;line-height:1.6;color:var(--muted);padding:24px}.no-feedback{font-size:14px;color:var(--muted);padding:24px}.preview-label{display:inline-flex;font-size:11px;letter-spacing:.4px;text-transform:uppercase;padding:3px 7px;border:1px solid var(--line);border-radius:5px;color:var(--muted);margin-bottom:8px}.feedback-error{padding:20px 24px;font-size:14px;color:var(--muted)}#feedback-preview{width:440px;max-width:calc(100vw - 36px);max-height:90dvh;overflow:auto;border-radius:15px;padding:32px 25px}.feedback-preview-header{display:flex;gap:12px;align-items:center;padding-right:20px;margin-bottom:22px}.feedback-preview-header h2{font-size:18px}.feedback-preview-header p{font-size:13px;color:var(--muted)}.feedback-screenshot{max-width:100%;display:block;border-radius:10px;margin:18px auto 0}.screenshot-placeholder{min-height:310px;border:1px dashed var(--line);border-radius:12px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:30px;text-align:center;color:var(--muted);background:var(--bg)}.screenshot-placeholder svg{width:42px;height:42px}.screenshot-placeholder strong{color:var(--fg);font-size:16px}.screenshot-placeholder p{font-size:14px}.feedback-full-quote{font-size:16px;line-height:1.6}.feedback-video{width:100%;max-height:60dvh;margin-top:20px;border-radius:8px;background:#000}
#share-menu{width:420px;max-width:calc(100vw - 32px);max-height:90dvh;border-radius:16px;overflow:auto}.share-heading{padding:18px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.share-heading h2{font-size:18px}.share-heading button{display:grid;place-items:center;width:32px;height:32px}.share-intro{padding:20px 24px 8px;font-size:14px;color:var(--muted)}.share-options{padding:5px 12px}.share-options>a,.share-options>button{display:flex;align-items:center;text-align:left;width:100%;padding:13px 12px;gap:17px;border-radius:8px;font-size:15px}.share-options>a:hover,.share-options>button:hover{background:var(--button)}.share-options small{display:block;font-size:12px;color:var(--muted);margin-top:2px}.x-icon{font-size:25px;width:24px;line-height:1}.copy-row{margin:10px 20px 0;padding:8px;background:var(--button);border-radius:8px;display:flex;gap:8px}.copy-row input{min-width:0;flex:1;background:none;color:var(--muted);border:0;padding:0 4px;font-size:12px;text-overflow:ellipsis}.copy-row button{flex-shrink:0;color:var(--link);font-weight:600;font-size:14px}#share-status{padding:12px 24px;font-size:13px;color:var(--fg);min-height:40px}#toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,12px);padding:11px 20px;background:var(--fg);color:var(--bg);border-radius:9px;box-shadow:0 6px 30px #0003;font-size:14px;pointer-events:none;opacity:0;transition:opacity .2s,transform .2s;z-index:100;max-width:calc(100vw - 32px);text-align:center}#toast.show{opacity:1;transform:translate(-50%,0)}
@media(min-width:651px) and (max-width:850px){.profile{grid-template-columns:130px minmax(0,1fr);column-gap:15px}.stats{gap:18px}.stats>div{min-width:0}.profile-actions{grid-column:1/-1;margin-top:24px}.profile-actions>a,.profile-actions>button{flex:1}.profile-link{line-height:1.5}.highlights{gap:30px;padding-top:30px;padding-bottom:30px}}
@media(max-width:650px){.mobile-header{font-size:22px}.mobile-header>div{gap:14px}.mobile-header svg{width:22px;height:22px}.mobile-header>div>button:last-child{display:none}.profile{grid-template-columns:92px minmax(0,1fr);gap:0 18px;padding-top:26px}.portrait{width:88px;height:88px}.stats .counter{font-size:19px}.stats span{font-size:14px}.bio{font-size:14px;line-height:1.5;margin-top:19px}.small-pill{font-size:14px;margin-top:10px;padding:5px 10px}.profile-actions>a,.profile-actions>button{padding:8px;min-height:37px}.highlights{gap:24px;padding:25px 17px 24px}.highlights button{min-width:72px}.highlight-ring{width:74px;height:74px}.tabs{height:48px;border-top:0}.tabs .active{padding:0;width:23%;border-bottom-width:2px}.tabs svg{width:26px;height:26px}.reel-grid{gap:3px;border-radius:7px}.reel-tile{border-radius:3px}.tile-meta{font-size:11px}.tile-reel{width:17px;height:17px}.profile-link{font-size:14px}.nav-label{display:none}#notifications{left:0;width:100vw;max-width:100vw;border-radius:0}.panel-header{padding:21px 18px 10px}.panel-intro,.panel-note{padding-left:18px;padding-right:18px}.feedback-filters{padding-left:18px;padding-right:18px}.feedback-row{padding-left:18px;padding-right:18px}.panel-header h2{font-size:23px}.story-card{padding-top:22px}#share-menu{width:100%;max-width:100%;margin:auto 0 0;border-radius:18px 18px 0;padding-bottom:env(safe-area-inset-bottom);animation:share-sheet .23s ease-out}@keyframes share-sheet{from{transform:translateY(45px);opacity:.2}to{transform:translateY(0);opacity:1}}#toast{bottom:75px}footer{padding-bottom:85px}.profile-actions a:first-child{flex:1.3}.blue-button{padding-left:14px;padding-right:14px}}
@media(max-width:360px){.profile{padding-left:12px;padding-right:12px;grid-template-columns:76px minmax(0,1fr);gap:0 13px}.portrait{width:74px;height:74px}.portrait>span{font-size:9px}.name{font-size:15px}.stats .counter{font-size:17px}.stats span{font-size:12px}.stats{gap:5px}.profile-actions>a,.profile-actions>button{font-size:12px}.mobile-header{padding:0 12px}.mobile-header>div{gap:10px}.bio{font-size:13px}.profile-link{font-size:13px}.tile-meta{font-size:10px;gap:3px}.highlights{gap:18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.reel-tile.reveal{opacity:1;transform:none}}
[hidden]{display:none!important}

/* Measured desktop profile proportions from the supplied Instagram reference. */
@media(min-width:651px){
 :root{--rail-width:72px}
 .rail{width:72px;border-right:0;padding:32px 12px 20px;align-items:center}
 .rail nav{position:absolute;top:30%;margin-top:0;gap:12px}
 .rail a:not(.brand),.rail button{width:48px;height:44px;display:grid;place-items:center;padding:0}
 .rail .brand{padding-left:0}
 .nav-label{display:none}
 .rail-bottom{display:grid;gap:8px}
 .notification-open .rail{width:72px}
 main{width:74%;max-width:1600px;margin:0 auto;padding:46px 0 0}
 .profile{width:680px;max-width:100%;margin:0 auto;padding:0;grid-template-columns:150px minmax(0,1fr);grid-template-areas:'photo identity' 'photo stats' 'photo bio' 'actions actions';column-gap:28px}
 .portrait{width:150px;height:150px;align-self:start;justify-self:start;margin-top:32px;transform:none}
 .portrait>span{display:none}
 .handle-row{min-height:32px;margin:0;gap:8px}
 .handle-row h1{font-size:24px;line-height:32px;letter-spacing:-.5px}
 .desktop-theme{display:none}
 .name{font-size:14px;font-weight:400;line-height:18px;margin-top:4px}
 .stats{margin:16px 0 20px;gap:18px;line-height:18px;justify-content:flex-start}
 .stats>div{display:flex;flex-direction:row;gap:4px;min-width:0}
 .stats strong,.stats span{font-size:14px}
 .bio{font-size:14px;line-height:18px;margin:0}
 .profile-link{font-size:14px;line-height:18px;margin-top:4px}
 .small-pill{font-size:14px;padding:4px 10px;margin-top:12px;line-height:18px}
 .profile-actions{grid-column:1/-1;margin-top:14px;gap:8px}
 .profile-actions>a,.profile-actions>button{height:44px;min-height:44px;padding:12px 16px;font-size:14px;line-height:20px;border-radius:12px;flex:1}
 .profile-actions>button{flex:0 0 100px}
 .highlights{width:680px;max-width:100%;margin:44px auto 34px;padding:0 14px;gap:12px;height:115px;align-items:flex-start}
 .highlights button{width:85px;min-width:85px;font-size:12px;line-height:16px;gap:10px;padding-top:7px}
 .highlight-ring{width:84px;height:84px;padding:4px;border:3px solid var(--ring)}
 .testimonial-cover>span{font-size:58px;line-height:1.25}
 .tabs{max-width:none;margin:0;height:40px;border-bottom:0}
 .tabs .active{width:64px;padding:0;justify-content:center}
 .tabs svg{width:24px;height:24px}
 .reel-grid{max-width:none;margin:0;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;border-radius:5px;overflow:hidden}
 .reel-tile{border-radius:0;aspect-ratio:9/14}
 .tile-hover{border-radius:0}
 .tile-meta{font-size:13px;padding:24px 12px 12px}
 .tile-reel{width:19px;height:19px;right:10px;top:10px}
 #notifications{left:72px}
}
@media(min-width:651px) and (max-width:1100px){
 main{width:calc(100% - 120px);margin-left:96px;padding-top:34px}
 .profile,.highlights{width:680px}
 .reel-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .highlights{margin-top:34px;margin-bottom:24px}
}
@media(min-width:651px) and (max-width:800px){
 .profile{grid-template-columns:120px minmax(0,1fr);column-gap:22px}
 .portrait{width:120px;height:120px}
 .stats{gap:14px}
 .bio{font-size:13px;line-height:18px}
 .profile-link{font-size:13px}
 .profile-actions{margin-top:24px}
}
@media(max-width:650px){
 .portrait>span{display:none}
 .reel-grid{gap:1px;border-radius:4px}
 .reel-tile,.tile-hover{border-radius:0}
 .reel-tile{aspect-ratio:9/14}
}
/* Profile story ring and immersive story viewer. */
.portrait.story-ring{padding:6px;background:linear-gradient(35deg,#ffd600 5%,#ff7a00 25%,#ff0169 55%,#d300c5 80%,#7638fa);border-radius:50%}
.portrait.story-ring img{border:3px solid var(--bg)}
.portrait.story-ring.stories-seen{background:var(--ring)}
#story{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:0;border:0;border-radius:0;background:#101010;overflow:hidden;color:#fff}
#story::backdrop{background:#101010}
#story>.dialog-close{position:fixed;right:22px;top:20px;background:transparent;z-index:10}
#story .story-card{width:min(450px,calc((100dvh - 40px)*.5625));height:calc(100dvh - 40px);min-height:0;max-height:none;margin:20px auto;overflow:hidden;background:#000;border-radius:8px;padding:0;isolation:isolate;touch-action:pan-x}
#story .story-progress{position:absolute;top:10px;left:10px;right:10px;z-index:5;gap:4px}
#story .story-progress span{height:2px;background:#ffffff55;overflow:hidden;border-radius:2px}
#story .story-progress span i{display:block;height:100%;background:white}
#story .story-author{position:absolute;top:24px;left:14px;right:14px;margin:0;padding:0;z-index:5;gap:9px;text-shadow:0 1px 8px #000}
#story .story-author img{width:32px;height:32px;border:0;margin:0}
#story .story-author>div{display:flex;flex-direction:column;gap:3px;flex:1}
#story .story-author strong{font-size:14px;font-weight:600}
#story-label{font-size:11px;color:#ddd}
#story .story-author button{width:30px;height:34px;color:#fff;padding:0;font-size:17px}
#story-body{height:100%;width:100%}
#story .story-body-inner{height:100%;padding:0;position:relative;display:flex;align-items:center;justify-content:center;background:#080808}
#story .story-body-inner>img{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:cover;border-radius:0;margin:0;opacity:.55}
#story .story-body-inner:after{content:'';position:absolute;inset:0;background:linear-gradient(#0005,transparent 30%,#0008);pointer-events:none}
#story .story-copy{position:relative;z-index:2;padding:80px 28px 100px;max-height:100%;overflow:auto;scrollbar-width:none;pointer-events:none}
#story .story-copy>span{font-size:10px;letter-spacing:1.4px;color:#fff}
#story .story-copy h2{font-size:clamp(24px,4dvh,36px);line-height:1.08;font-weight:800;text-transform:uppercase;margin:18px 0;letter-spacing:-.7px}
#story .story-copy p{font-size:clamp(12px,1.8dvh,16px);line-height:1.5;color:white;margin:14px 0}
#story .story-copy a{display:inline-block;background:#fff;color:#111;border-radius:7px;padding:11px 16px;font-size:13px;font-weight:600;pointer-events:auto;position:relative;z-index:6}
#story .story-controls{position:absolute;inset:76px 0 84px;display:flex;margin:0;padding:0;z-index:3;pointer-events:none}
#story .story-controls button{height:100%;width:28%;background:transparent;border-radius:0;transform:none;pointer-events:auto}
#story #story-next{margin-left:auto;width:36%}
#story .story-footer{position:absolute;bottom:0;left:0;right:0;padding:16px 12px max(16px,env(safe-area-inset-bottom));display:flex;gap:12px;align-items:center;z-index:6;background:linear-gradient(transparent,#000b)}
#story .story-footer a{flex:1;border:1px solid #ffffff80;border-radius:30px;padding:13px 16px;font-size:12px;color:white}
#story .story-footer button{padding:0;display:grid;place-items:center;width:27px;height:36px;color:#fff}
#story-like[aria-pressed=true] svg{fill:#ff3040;stroke:#ff3040}
@media(max-width:600px){#story .story-card{width:100%;height:100dvh;margin:0;border-radius:0}#story>.dialog-close{right:8px;top:27px;width:28px;height:30px}#story .story-author{right:42px}#story .story-copy{padding-left:32px;padding-right:32px}#story .story-progress{top:8px}}
@media(prefers-reduced-motion:reduce){#story *{animation:none!important;transition:none!important}}

.portrait.story-ring{padding:3px}.portrait.story-ring img{border:3px solid var(--bg)}

#story-like{transition:color 180ms ease;transform-origin:center}
#story-like[aria-pressed=true]{color:#ff3040}
#story-like[aria-pressed=true] svg,#story-like[aria-pressed=true] svg use{fill:#ff3040;stroke:#ff3040}

/* Five editorial cards for the Start Here highlight. */
#story .story-design{background:#131313}
#story .story-design .story-copy{width:100%;padding:100px 30px 110px}
#story .story-design .story-copy>span{font-size:9px;letter-spacing:2px;display:block;color:#ff925d;line-height:1.6}
#story .story-design .story-copy h2{font-size:clamp(30px,5.3dvh,44px);text-transform:none;line-height:1.04;letter-spacing:-1.6px;margin:22px 0}
#story .story-design .story-copy p{max-width:290px;font-size:16px;line-height:1.55}
#story .story-design:after{background:linear-gradient(#0006,transparent 20%,transparent 80%,#0005)}
#story .story-intro{background:radial-gradient(ellipse at 100% 90%,#703115 0,transparent 55%),#121212}
#story .story-intro .story-copy h2{max-width:330px}
#story .story-stamp{display:block;margin-top:46px;font-size:9px;letter-spacing:2px;color:#aaa}
#story .story-meet>img{opacity:.75;object-position:center 30%}
#story .story-meet:after{background:linear-gradient(#0005,transparent 25%,#000b 65%,#000 100%)}
#story .story-meet{align-items:flex-end}
#story .story-meet .story-copy{padding-bottom:120px;padding-top:250px}
#story .story-meet .story-copy h2{font-size:36px}
#story .story-meet .story-copy p{margin:7px 0}
#story .craft-steps{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
#story .craft-steps>span{display:flex;align-items:center;gap:9px;padding:10px 13px;border:1px solid #ffffff25;border-radius:7px;font-size:13px;color:#fff}
#story .craft-steps small{color:#fe5400;font-size:10px}
#story .story-work>img{inset:auto 25px 140px;width:calc(100% - 50px);height:40%;max-height:none;opacity:1;object-fit:cover;border-radius:10px}
#story .story-work{align-items:flex-start}
#story .story-work .story-copy{padding-top:105px}
#story .story-work .story-copy h2{font-size:32px;margin:15px 0}
#story .story-work .story-copy p{font-size:13px;margin:6px 0}
#story .story-work .story-copy a{margin-top:18px}
#story .story-invite{background:radial-gradient(ellipse at 90% 10%,#8a3215,transparent 60%),#18100c}
#story .story-invite .story-copy a{background:#fe5400;color:white;padding:15px 22px;margin-top:28px;border-radius:8px}
@media(max-height:650px){#story .story-design .story-copy{padding:80px 25px 85px}#story .story-design .story-copy h2{font-size:30px;margin:15px 0}#story .story-design .story-copy p{font-size:13px}#story .story-meet .story-copy{padding-top:180px}#story .story-work>img{height:28%;bottom:95px}#story .story-stamp{margin-top:24px}}

#story .story-testimonial-intro{background:radial-gradient(ellipse at 100% 80%,#572917,transparent 60%),#121212}
#story .story-testimonial-intro .story-copy:before{content:'“';display:block;font:100px/.6 Georgia,serif;color:#fe5400;margin-bottom:25px}
#story .story-testimonial-intro .story-copy p{white-space:pre-line}
#story .testimonial-video-wrap{height:100%;background:#000;padding:80px 0 92px;position:relative}
#story .testimonial-video-wrap video{width:100%;height:100%;object-fit:contain;display:block}
#story .testimonial-caption{position:absolute;top:82px;left:15px;padding:7px 12px;background:#0009;border-radius:5px;color:#fff;font-size:12px;pointer-events:none}
#story .testimonial-caption span{color:#ccc;margin-left:8px;font-size:10px}
#story .has-story-video .story-controls{inset:auto 0 84px;height:35px}
#story .has-story-video .story-controls button{width:38px;height:30px;border-radius:50%;background:#333b;margin:0 8px}
#story .has-story-video #story-next{margin-left:auto}
#story .has-story-video #story-prev:after{content:'‹';font-size:25px}
#story .has-story-video #story-next:after{content:'›';font-size:25px}

#story .has-story-video #story-next{width:38px}

/* Edge-to-edge testimonial story, with story-level controls only. */
#story .testimonial-video-wrap{padding:0;height:100%;width:100%}
#story .testimonial-video-wrap video{width:100%;height:100%;object-fit:cover}
#story .testimonial-caption{top:auto;bottom:100px;left:16px;background:#0006}
#story .story-video-speed{position:absolute;right:16px;top:80px;min-width:46px;height:30px;padding:0 10px;display:grid;place-items:center;border-radius:15px;background:#0007;backdrop-filter:blur(6px);color:white;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;z-index:7}
#story .story-video-speed:hover{background:#000a}
#story .has-story-video .story-controls{inset:120px 0 140px;height:auto}
#story .has-story-video .story-controls button,#story .has-story-video #story-next{width:25%;height:100%;background:transparent;margin:0;border-radius:0}
#story .has-story-video #story-next{margin-left:auto}
#story .has-story-video #story-prev:after,#story .has-story-video #story-next:after{content:none}
#story .has-story-video .story-author{text-shadow:0 1px 6px #000}

/* ===== v3: tabs, reels feed, long-form, before/after, tagged, DMs, motion ===== */
@property --split{syntax:'<percentage>';inherits:true;initial-value:50%}
:root{--ease:cubic-bezier(.22,1,.36,1);--skel:#efefef;--skel-hi:#f8f8f8}
html[data-theme=dark]{--skel:#1c2025;--skel-hi:#262b31}
.sample-tag{display:inline-flex;align-items:center;font-size:10px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;padding:2px 6px;border-radius:4px;border:1px solid currentColor;opacity:.6;line-height:1.3;vertical-align:middle;flex-shrink:0}
.av{width:32px;height:32px;border-radius:50%;object-fit:cover;flex-shrink:0;display:inline-grid;place-items:center}
.av-initials{background:linear-gradient(135deg,hsl(var(--h) 85% 58%),hsl(calc(var(--h) + 40) 80% 42%));color:#fff;font-size:12px;font-weight:700;letter-spacing:.3px}

/* Page intro */
body:not(.ready) .profile>*,body:not(.ready) .highlights>*{opacity:0}
body.ready .profile>*,body.ready .highlights>*{animation:rise .7s var(--ease) backwards}
.profile>*:nth-child(2){animation-delay:.05s}.profile>*:nth-child(3){animation-delay:.1s}.profile>*:nth-child(4){animation-delay:.15s}.profile>*:nth-child(5){animation-delay:.2s}
.highlights>*:nth-child(1){animation-delay:.22s}.highlights>*:nth-child(2){animation-delay:.28s}.highlights>*:nth-child(3){animation-delay:.34s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.portrait.story-ring{transition:transform .35s var(--ease)}
.portrait.story-ring:hover{transform:scale(1.03)}
.portrait.story-ring:not(.stories-seen){background-size:200% 200%;animation:ring-shift 6s ease-in-out infinite}
@keyframes ring-shift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.highlight-ring{transition:transform .3s var(--ease),border-color .3s}
.highlights button:hover .highlight-ring{transform:scale(1.06);border-color:var(--accent)}
.highlights button:hover{opacity:1}

/* Tabs */
.tabs{position:relative;gap:56px}
.tabs button{display:flex!important;align-items:center;gap:7px;color:var(--muted);font-size:12px;font-weight:600;letter-spacing:1px;border:0!important;width:auto!important;padding:0 2px!important;margin:0!important;transition:color .2s}
.tabs button:hover{color:var(--fg)}
.tabs button svg{width:16px!important;height:16px!important}
.tabs button span{display:inline!important}
.tabs .active{color:var(--fg)}
.tab-indicator{position:absolute;left:0;top:-1px;height:1.5px;background:var(--fg);width:0;transition:transform .4s var(--ease),width .4s var(--ease);pointer-events:none}
@media(min-width:651px){.tabs{border-top:1px solid var(--line);height:53px}}
.tab-panel.entering{animation:panel-in .45s var(--ease)}
@keyframes panel-in{from{opacity:0;transform:translateX(calc(var(--dir,1)*24px))}to{opacity:1;transform:none}}
.tab-panels{overflow:hidden;padding-bottom:4px}

/* Skeleton + reveal */
.skel{background:linear-gradient(100deg,var(--skel) 30%,var(--skel-hi) 50%,var(--skel) 70%) 0 0/300% 100%;animation:shimmer 1.4s linear infinite}
.skel.loaded{animation:none;background:var(--skel)}
.skel img[data-skel]{opacity:0;transition:opacity .5s ease}
.skel.loaded img[data-skel]{opacity:1}
@keyframes shimmer{to{background-position:-150% 0}}
.reveal-item{opacity:0;transform:translateY(18px) scale(.985)}
.reveal-item.revealed{opacity:1;transform:none;transition:opacity .7s var(--ease) var(--d,0ms),transform .7s var(--ease) var(--d,0ms)}

/* Reel tiles */
.reel-tile{animation:none!important;isolation:isolate}
.reel-tile img,.reel-tile .tile-preview{transition:transform .6s var(--ease),opacity .5s ease}
.reel-tile:hover img,.reel-tile:hover .tile-preview{transform:scale(1.045)}
.tile-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;z-index:0}
.tile-preview.on{opacity:1}
.tile-reel,.tile-pin,.tile-meta,.tile-hover{z-index:1}
.tile-meta{font-weight:600}
.tile-hover{flex-direction:row;gap:22px;font-weight:700;background:#0005}
.tile-hover>span{display:flex;align-items:center;gap:6px}
.tile-hover svg{width:22px;height:22px;fill:currentColor}
.reel-tile:hover .tile-meta{opacity:0}
.tile-meta{transition:opacity .2s}

/* Long-form grid */
.long-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px 18px;padding:20px 0 10px}
.long-card{display:flex;flex-direction:column;gap:12px;padding:0;text-align:left}
.long-thumb{position:relative;display:block;aspect-ratio:16/9;border-radius:12px;overflow:hidden;isolation:isolate}
.long-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease),opacity .5s}
.long-card:hover .long-thumb img,.long-card:hover .tile-preview{transform:scale(1.04)}
.long-duration{position:absolute;right:8px;bottom:8px;z-index:2;background:#000c;color:#fff;font-size:12px;font-weight:600;padding:2px 6px;border-radius:5px}
.long-play{position:absolute;inset:0;z-index:2;display:grid;place-items:center;color:#fff;opacity:0;transition:opacity .25s;background:radial-gradient(circle,#0005,transparent 60%)}
.long-play svg{width:46px;height:46px;fill:#fff;stroke:none;transform:scale(.8);transition:transform .35s var(--ease)}
.long-card:hover .long-play{opacity:1}.long-card:hover .long-play svg{transform:scale(1)}
.long-info{display:flex;gap:11px;align-items:flex-start}
.long-info .av{width:36px;height:36px}
.long-text{flex:1;min-width:0}
.long-info strong{display:block;font-size:15px;line-height:1.35;font-weight:600}
.long-info small{display:block;color:var(--muted);font-size:13px;margin-top:3px}
.long-card:active{transform:scale(.985)}

/* Before / after tiles */
.ba-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding-top:4px}
.ba-tile{position:relative;padding:0;aspect-ratio:9/14;overflow:hidden;--split:50%;isolation:isolate}
.ba-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba-tile .ba-tile-raw{clip-path:inset(0 calc(100% - var(--split)) 0 0)}
.ba-tile-line{position:absolute;top:0;bottom:0;left:var(--split);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 12px #0008;z-index:2}
.ba-tile-line>span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;background:#fff;color:#111;display:grid;place-items:center;box-shadow:0 4px 18px #0006}
.ba-tile-line svg{width:18px;height:18px}
.ba-tile-tag{position:absolute;top:10px;z-index:2;font-size:10px;font-weight:700;letter-spacing:1px;color:#fff;background:#0008;padding:3px 7px;border-radius:4px;backdrop-filter:blur(4px)}
.ba-tile-tag.raw{left:10px}.ba-tile-tag.edit{right:10px;background:var(--accent)}
.ba-tile .tile-meta{z-index:2}
.ba-tile .tile-preview{z-index:1;transition:opacity .4s ease}
.ba-tile .ba-tile-raw,.ba-tile-line,.ba-tile-tag.raw{transition:opacity .3s ease}
.ba-tile:has(.tile-preview.on) .ba-tile-raw,.ba-tile:has(.tile-preview.on) .ba-tile-line,.ba-tile:has(.tile-preview.on) .ba-tile-tag.raw{opacity:0}
@keyframes ba-peek{0%,100%{--split:50%}30%{--split:15%}70%{--split:85%}}

/* Tagged clients */
.tagged-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;padding:20px 0 10px}
.client-card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 16px 18px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--bg);transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.client-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px #0002;border-color:transparent}
.client-cover{display:block;width:calc(100% + 32px);height:84px;background:var(--button);overflow:hidden}
.client-cover img{width:100%;height:100%;object-fit:cover;filter:blur(1px) brightness(.85);transform:scale(1.1);transition:transform .6s var(--ease)}
.client-card:hover .client-cover img{transform:scale(1.18)}
.client-ring{margin-top:-36px;padding:3px;border-radius:50%;background:linear-gradient(35deg,#ffd600,#ff7a00 30%,#ff0169 60%,#d300c5 85%);display:grid}
.client-ring .av{width:70px;height:70px;border:3px solid var(--bg);font-size:22px}
.client-card strong{margin-top:10px;font-size:15px}
.client-card small{color:var(--muted);font-size:13px}
.client-niche{font-size:12px;margin-top:6px;padding:3px 9px;border-radius:20px;background:var(--button)}
.client-stats{display:flex;gap:14px;font-size:13px;color:var(--muted);margin:12px 0 4px}
.client-stats b{color:var(--fg)}
.client-card .sample-tag{position:absolute;top:8px;right:8px;color:#fff;opacity:.9;background:#0006;border-color:#fff8}
.client-cta{margin-top:10px;width:100%;padding:8px;border-radius:8px;background:var(--button);font-size:14px;font-weight:600;transition:background .2s}
.client-card:hover .client-cta{background:var(--accent);color:#fff}
.empty-panel{color:var(--muted);text-align:center;padding:40px}

/* Reels feed */
#feed{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;background:#000;color:#fff;overflow:hidden}
#feed::backdrop{background:#000}
#feed[open]{animation:fade-in .25s ease}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
.feed-top{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:14px 18px;pointer-events:none;background:linear-gradient(#0008,transparent)}
.feed-top strong{font-size:22px;font-weight:700;letter-spacing:-.3px}
.feed-top button{pointer-events:auto;width:40px;height:40px;display:grid;place-items:center;color:#fff;border-radius:50%}
.feed-top button:hover{background:#ffffff1a}
.feed-scroller{height:100%;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none;outline:0}
.feed-scroller::-webkit-scrollbar{display:none}
.feed-item{height:100%;scroll-snap-align:start;scroll-snap-stop:always;display:flex;justify-content:center;align-items:center;gap:16px;padding:16px 0;position:relative}
.feed-frame{position:relative;height:100%;aspect-ratio:9/16;max-width:100vw;border-radius:10px;overflow:hidden;background:#111;transform-origin:center}
.feed-frame video{width:100%;height:100%;object-fit:cover;display:block;background:#111}
.feed-frame video.fit-contain{object-fit:contain;background:#000}
.feed-tap{position:absolute;inset:0;z-index:1;cursor:pointer}
.feed-novideo{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;gap:12px;justify-content:center;align-items:center;background:#0009;text-align:center}
.feed-novideo a{background:#fff;color:#111;padding:9px 16px;border-radius:8px;font-weight:600;font-size:14px}
.feed-paused{position:absolute;top:50%;left:50%;z-index:2;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:#0007;display:grid;place-items:center;opacity:0;transform:scale(1.3);transition:opacity .2s,transform .3s var(--ease);pointer-events:none}
.feed-paused svg{width:34px;height:34px;fill:#fff;stroke:none;margin-left:5px}
.feed-item.paused .feed-paused{opacity:1;transform:scale(1)}
.feed-burst{position:absolute;z-index:3;width:110px;height:110px;margin:-55px 0 0 -55px;pointer-events:none;opacity:0}
.feed-burst svg{width:100%;height:100%;fill:#ff3040;stroke:none;filter:drop-shadow(0 6px 18px #0006)}
.feed-burst.go{animation:burst .9s var(--ease)}
@keyframes burst{0%{opacity:0;transform:scale(.2) rotate(-15deg)}15%{opacity:1;transform:scale(1.15) rotate(5deg)}30%{transform:scale(.95) rotate(0)}70%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.6) translateY(-80px)}}
.feed-info{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:60px 16px 22px;background:linear-gradient(transparent,#000a 45%);font-size:14px;pointer-events:none}
.feed-info a,.feed-info p{pointer-events:auto}
.feed-author{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.feed-author .av{width:32px;height:32px;border:1.5px solid #fff}
.feed-author .av-collab{margin-left:-18px}
.feed-names{font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feed-names span{opacity:.85}
.feed-follow{border:1px solid #fffa;border-radius:8px;padding:4px 10px;font-size:13px;font-weight:600;flex-shrink:0;transition:background .2s}
.feed-follow:hover{background:#fff2}
.feed-caption{line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer;white-space:pre-line;transition:max-height .4s var(--ease);max-height:3em}
.feed-item.show-caption .feed-caption{-webkit-line-clamp:unset;max-height:40vh;overflow:auto}
.feed-audio{display:flex;align-items:center;gap:7px;margin-top:10px;font-size:13px;opacity:.9}
.feed-audio svg{width:15px;height:15px}
.feed-audio span:not(.sample-tag){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feed-progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:#ffffff30;z-index:3}
.feed-progress i{display:block;height:100%;background:#fff;transform-origin:left;transform:scaleX(0)}
.feed-actions{display:flex;flex-direction:column;align-items:center;gap:18px;align-self:flex-end;padding-bottom:10px;z-index:3}
.feed-actions button,.feed-actions a{display:flex;flex-direction:column;align-items:center;gap:4px;color:#fff;font-size:12px;font-weight:600;padding:0;min-width:44px}
.feed-actions svg{width:28px;height:28px}
.feed-actions .fa-speed b{display:grid;place-items:center;height:28px;font-size:17px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.3px}
.fa-like[aria-pressed=true] svg{fill:#ff3040;stroke:#ff3040}
.feed-actions button:hover svg,.feed-actions a:hover svg{transform:scale(1.1)}
.feed-actions svg{transition:transform .2s var(--ease)}
.fa-thumb .av{width:30px;height:30px;border-radius:7px;border:2px solid #fff}
.feed-nav{position:absolute;right:28px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px;z-index:5}
.feed-nav button{width:46px;height:46px;border-radius:50%;background:#ffffff1f;color:#fff;display:grid;place-items:center;backdrop-filter:blur(8px);transition:background .2s,opacity .2s}
.feed-nav button:hover{background:#ffffff38}
.feed-nav button:disabled{opacity:.25;cursor:default}
.feed-down svg{transform:rotate(180deg)}
@media(max-width:650px){
 .feed-item{padding:0;gap:0}
 .feed-frame{width:100%;height:100%;aspect-ratio:auto;border-radius:0}
 .feed-actions{position:absolute;right:8px;bottom:96px;gap:20px;padding:0}
 .feed-info{padding-right:70px;padding-bottom:calc(20px + env(safe-area-inset-bottom))}
 .feed-nav{display:none}
 .feed-top{padding:12px 12px 12px 16px}
}

/* Shared viewer chrome */
.long-head{display:flex;align-items:center;gap:10px;font-size:14px}
.long-head .av{width:36px;height:36px}
.head-text{flex:1;min-width:0;display:flex;flex-direction:column}
.long-head small{color:var(--muted);font-size:12px}
.long-head a{font-weight:600;color:var(--link);font-size:14px}
.long-head .ba-studio{margin-left:auto;flex-shrink:0;background:var(--accent);color:#fff;font-weight:600;font-size:13px;padding:7px 14px;border-radius:8px;white-space:nowrap}
.long-head a.ba-studio:hover{background:var(--accent-hover)}

/* Long-form viewer */
#long-viewer{width:min(1180px,calc(100vw - 120px));max-height:calc(100dvh - 60px);border-radius:12px}
.long-shell{display:grid;grid-template-columns:minmax(0,1fr) 330px;height:min(640px,calc(100dvh - 60px));border-radius:12px;overflow:hidden}
.long-stage{background:#000;display:grid;place-items:center;width:100%;min-height:0}
.long-stage video{object-fit:contain}
.long-stage video,.long-stage iframe{width:100%;height:100%;border:0;display:block}
.long-side{padding:20px;overflow:auto;border-left:1px solid var(--line)}
.long-side h2{font-size:18px;line-height:1.3;margin:16px 0 6px}
.long-meta{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px}
.long-caption{font-size:14px;line-height:1.55;margin:12px 0 0}
.long-side h3{font-size:13px;margin:22px 0 8px;color:var(--muted);font-weight:600;letter-spacing:.3px;text-transform:uppercase}
.long-chapters{list-style:none;margin:0;padding:0}
.long-chapters button{display:flex;gap:12px;width:100%;text-align:left;padding:8px 10px;border-radius:8px;font-size:14px}
.long-chapters button:hover{background:var(--button)}
.long-chapters span{color:var(--link);font-weight:600;font-variant-numeric:tabular-nums;min-width:38px}
.long-next{display:grid;gap:10px}
.long-next button{display:flex;gap:10px;text-align:left;padding:4px;border-radius:8px;align-items:center}
.long-next button:hover{background:var(--button)}
.long-next img{width:120px;aspect-ratio:16/9;object-fit:cover;border-radius:6px;flex-shrink:0}
.long-next strong{display:block;font-size:13px;line-height:1.3}
.long-next small{display:block;color:var(--muted);font-size:12px;margin-top:3px}

/* Before / after viewer */
#ba-viewer{--bah:min(760px,calc(100dvh - 60px));width:calc(var(--bah)*9/16 + 300px);max-width:calc(100vw - 120px);border-radius:12px}
.ba-shell{display:grid;grid-template-columns:calc(var(--bah)*9/16) minmax(0,300px);height:var(--bah);border-radius:12px;overflow:hidden}
.ba-stage{--split:50%;position:relative;height:100%;width:100%;background:#000;overflow:hidden;touch-action:none}
.ba-layer{position:absolute;inset:0}
.ba-layer video{width:100%;height:100%;object-fit:cover;display:block}
.ba-raw{clip-path:inset(0 calc(100% - var(--split)) 0 0)}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--split);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 14px #000a;pointer-events:none;z-index:2}
.ba-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:#fff;color:#111;display:grid;place-items:center;box-shadow:0 6px 20px #0007}
.ba-label{position:absolute;top:14px;z-index:2;font-size:11px;font-weight:700;letter-spacing:1.2px;color:#fff;padding:4px 9px;border-radius:5px;background:#0009;backdrop-filter:blur(6px);pointer-events:none}
.ba-label-raw{left:14px}.ba-label-edit{right:14px;background:var(--accent)}
.ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:3;-webkit-appearance:none;appearance:none}
.ba-range::-webkit-slider-thumb{-webkit-appearance:none;width:60px;height:100vh}
.ba-range:focus-visible~.ba-handle span,.ba-stage:has(.ba-range:focus-visible) .ba-handle span{outline:3px solid var(--focus)}
.ba-side{padding:20px;overflow:auto;border-left:1px solid var(--line)}
.ba-side h2{font-size:18px;margin:16px 0 6px}
.ba-hint{font-size:13px;color:var(--muted);line-height:1.5}
.ba-side h3{font-size:13px;margin:22px 0 8px;color:var(--muted);font-weight:600;letter-spacing:.3px;text-transform:uppercase}
.ba-notes{list-style:none;padding:0;margin:0;display:grid;gap:10px;font-size:14px}
.ba-notes li{display:flex;gap:10px;align-items:center}
.ba-notes svg{width:18px;height:18px;color:var(--accent);stroke-width:2.4}
.ba-controls{display:flex;gap:8px;margin-top:24px}
.ba-controls button{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:10px;border-radius:8px;background:var(--button);font-size:14px;font-weight:600}
.ba-controls button:hover{background:var(--hover)}
.ba-controls svg{width:16px;height:16px}

/* Client sheet */
#client-sheet{width:min(560px,calc(100vw - 32px));max-height:88dvh;border-radius:16px;overflow:hidden;display:none;flex-direction:column}
#client-sheet[open]{display:flex}
#client-sheet .panel-header{padding:12px 14px;border-bottom:1px solid var(--line)}
#client-sheet .panel-header h2{font-size:16px;font-weight:700;letter-spacing:0}
#client-sheet .panel-header span{width:32px}
.client-body{overflow:auto;padding:20px}
.client-profile{display:flex;align-items:center;gap:24px}
.av-lg{width:86px!important;height:86px!important;font-size:28px!important}
.client-numbers{display:flex;flex:1;justify-content:space-around;text-align:center}
.client-numbers span{display:flex;flex-direction:column;font-size:13px;color:var(--muted)}
.client-numbers b{font-size:17px;color:var(--fg)}
.client-bio{margin-top:12px;font-size:14px;display:flex;flex-direction:column;gap:2px;align-items:flex-start}
.client-bio span{color:var(--muted)}
.client-bio p{font-size:13px}
.client-actions{display:flex;gap:8px;margin:16px 0 6px}
.client-actions>*{flex:1;text-align:center;padding:9px;border-radius:8px;font-size:14px;font-weight:600}
.client-actions button{background:var(--button)}
.client-body h3{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin:22px 0 10px}
.client-reels{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:2px!important;border-radius:6px}
.client-reels .reel-tile{aspect-ratio:9/14}
.client-long{display:grid;gap:10px}
.client-long button{display:flex;gap:12px;align-items:center;text-align:left;padding:4px;border-radius:8px}
.client-long button:hover{background:var(--button)}
.client-long img{width:110px;aspect-ratio:16/9;object-fit:cover;border-radius:6px}
.client-long strong{display:block;font-size:14px}
.client-long small{color:var(--muted);font-size:12px}

/* DM contact */
#contact{width:390px;max-width:100vw;height:min(620px,calc(100dvh - 40px));padding:0;border-radius:16px;text-align:left;display:none;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px #0004;border:1px solid var(--line);inset:auto 24px 24px auto;margin:0;position:fixed}
#contact[open]{display:flex;animation:dm-in .35s var(--ease)}
#contact::backdrop{background:#0003;backdrop-filter:none}
@keyframes dm-in{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
.dm-header{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
.dm-header img{width:38px;height:38px;border-radius:50%;object-fit:cover}
.dm-header>div{flex:1;display:flex;flex-direction:column;font-size:15px}
.dm-header>div span{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:5px}
.dm-header i{width:8px;height:8px;border-radius:50%;background:#2ecc71;box-shadow:0 0 0 0 #2ecc7188;animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 6px #2ecc7100}100%{box-shadow:0 0 0 0 #2ecc7100}}
.dm-header button,.dm-header a{width:36px;height:36px;display:grid;place-items:center;border-radius:50%}
.dm-header button:hover,.dm-header a:hover{background:var(--button)}
.dm-thread{flex:1;overflow:auto;padding:16px 14px;display:flex;flex-direction:column;gap:4px;overscroll-behavior:contain}
.dm-intro{display:flex;flex-direction:column;align-items:center;text-align:center;padding:10px 0 22px;gap:2px}
.dm-intro img{width:84px;height:84px;border-radius:50%;object-fit:cover;margin-bottom:8px}
.dm-intro strong{font-size:17px}
.dm-intro span,.dm-intro small{color:var(--muted);font-size:13px}
.dm-msg{max-width:78%;padding:9px 13px;border-radius:20px;font-size:14px;line-height:1.4;white-space:pre-line;position:relative;animation:msg-in .35s var(--ease) both;word-wrap:break-word}
.dm-msg.them{align-self:flex-start;background:var(--button);border-bottom-left-radius:6px}
.dm-msg.me{align-self:flex-end;background:linear-gradient(135deg,#6e3cfb,#a033ff 40%,#e13ab8);color:#fff;border-bottom-right-radius:6px;transform-origin:right bottom}
html[data-theme=dark] .dm-msg.me{background:linear-gradient(135deg,#fe5400,#ff2d6f)}
.dm-msg+.dm-msg.them,.dm-msg.me+.dm-msg.me{margin-top:-1px}
.dm-msg.them+.dm-msg.me,.dm-msg.me+.dm-msg.them,.dm-seen+.dm-msg{margin-top:10px}
.dm-msg.reacted:after{content:'❤️';position:absolute;bottom:-12px;right:6px;font-size:12px;background:var(--modal);border-radius:10px;padding:1px 4px;box-shadow:0 1px 4px #0003}
.dm-msg.reacted{margin-bottom:12px}
@keyframes msg-in{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
.dm-msg.brief{display:flex;flex-direction:column;gap:8px;padding:14px;white-space:normal;max-width:85%}
.dm-msg.brief span{display:flex;flex-direction:column;font-size:14px}
.dm-msg.brief small{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.dm-seen{align-self:flex-end;font-size:11px;color:var(--muted);margin:2px 4px 0}
.dm-typing{align-self:flex-start;display:flex;gap:4px;padding:12px 14px;border-radius:20px;background:var(--button);margin-top:6px;animation:msg-in .25s var(--ease)}
.dm-typing i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:typing 1.1s infinite}
.dm-typing i:nth-child(2){animation-delay:.15s}.dm-typing i:nth-child(3){animation-delay:.3s}
@keyframes typing{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.dm-actions{display:grid;gap:8px;margin:12px 0 4px;animation:msg-in .4s var(--ease) both}
.dm-action{display:flex;align-items:center;gap:12px;text-align:left;padding:12px 14px;border:1px solid var(--line);border-radius:14px;width:100%;transition:background .2s,transform .2s}
.dm-action:hover{background:var(--button)}
.dm-action strong{display:block;font-size:14px}
.dm-action small{color:var(--muted);font-size:12px}
.dm-action.primary{background:var(--accent);color:#fff;border-color:transparent}
.dm-action.primary small{color:#ffffffcc}
.dm-action.primary:hover{background:var(--accent-hover)}
.dm-chips{display:flex;gap:6px;padding:0 12px 10px;overflow-x:auto;scrollbar-width:none;flex-shrink:0}
.dm-chips:empty{display:none}
.dm-chips button{flex-shrink:0;border:1px solid var(--accent);color:var(--accent);border-radius:20px;padding:7px 13px;font-size:13px;font-weight:600;animation:msg-in .3s var(--ease) both;transition:background .2s,color .2s}
.dm-chips button:nth-child(2){animation-delay:.04s}.dm-chips button:nth-child(3){animation-delay:.08s}.dm-chips button:nth-child(4){animation-delay:.12s}.dm-chips button:nth-child(5){animation-delay:.16s}
.dm-chips button:hover{background:var(--accent);color:#fff}
.dm-composer{display:flex;gap:8px;align-items:center;margin:0 12px 12px;padding:6px 6px 6px 16px;border:1px solid var(--line);border-radius:24px}
.dm-composer input{flex:1;min-width:0;border:0;background:none;color:var(--fg);font-size:14px;outline:0;padding:6px 0}
.dm-composer button{color:var(--accent);font-weight:700;font-size:14px;padding:6px 10px}
.dm-pill{position:fixed;right:24px;bottom:24px;z-index:9;display:flex;align-items:center;gap:10px;padding:10px 12px 10px 18px;border-radius:30px;background:var(--modal);border:1px solid var(--line);box-shadow:0 8px 30px #0002;font-weight:600;font-size:15px;transition:transform .3s var(--ease),box-shadow .3s}
.dm-pill:hover{transform:translateY(-2px);box-shadow:0 12px 34px #0003}
/* Orange glowing outline, breathing softly */
.dm-pill{border-color:#fe5400;box-shadow:0 0 0 1px #fe540066,0 0 14px #fe540073,0 8px 30px #0002;animation:dm-glow 2.8s ease-in-out infinite}
.dm-pill:hover{box-shadow:0 0 0 1px #fe5400aa,0 0 22px #fe5400a6,0 12px 34px #0003}
@keyframes dm-glow{50%{box-shadow:0 0 0 1px #fe540099,0 0 24px #fe54009e,0 8px 30px #0002}}
@media(prefers-reduced-motion:reduce){.dm-pill{animation:none}}
.dm-pill-avatars img{width:26px;height:26px;border-radius:50%;object-fit:cover;display:block;border:2px solid var(--modal)}
@media(max-width:650px){
 .dm-pill{right:14px;bottom:calc(69px + env(safe-area-inset-bottom));padding:8px 10px 8px 14px;gap:8px;font-size:14px}
 #contact{inset:0;width:100vw;height:100dvh;max-height:100dvh;border-radius:0;border:0}
 #contact[open]{animation:dm-sheet .35s var(--ease)}
 @keyframes dm-sheet{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
 .dm-composer{margin-bottom:calc(12px + env(safe-area-inset-bottom))}
}

/* Responsive viewers */
@media(max-width:1100px) and (min-width:651px){.tabs{gap:36px}}
@media(max-width:900px){
 #long-viewer{width:min(640px,calc(100vw - 32px))}
 .long-shell{grid-template-columns:1fr;max-height:calc(100dvh - 40px);overflow:auto}
 .long-side{border-left:0;overflow:visible}
 #long-viewer .dialog-close,#ba-viewer .dialog-close{right:8px;top:8px;background:#0009;border-radius:50%;z-index:5}
}
@media(max-width:760px){
 #ba-viewer{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0}
 .ba-shell{grid-template-columns:1fr;height:100dvh;border-radius:0;overflow:auto}
 .ba-shell{display:block}
 .ba-stage{height:auto;width:min(100%,calc(70dvh*9/16));aspect-ratio:9/16;margin:0 auto}
 .ba-viewer-bg,#ba-viewer{background:var(--modal)}
 .ba-side{border-left:0}
}
@media(max-width:650px){
 .tabs{gap:0;justify-content:space-around}
 .tabs button{flex:1;justify-content:center;height:100%}
 .tabs button span{display:none!important}
 .tabs button svg{width:24px!important;height:24px!important}
 .tab-indicator{top:auto;bottom:-1px;height:2px}
 .long-grid{grid-template-columns:1fr;gap:22px;padding:14px 12px}
 .ba-grid{gap:1px;padding-top:1px}
 .ba-tile-tag{top:6px;font-size:8px;padding:2px 5px}.ba-tile-tag.raw{left:6px}.ba-tile-tag.edit{right:6px}
 .ba-tile-line>span{width:24px;height:24px}.ba-tile-line svg{width:13px;height:13px}
 .ba-tile .tile-meta{font-size:10px}
 .tagged-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:14px 12px}
 .client-card{padding:0 10px 14px}
 .client-stats{gap:8px;font-size:12px}
 #long-viewer{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0}
 .long-shell{max-height:100dvh;height:100dvh;border-radius:0}
 #client-sheet{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0}
}
@media(prefers-reduced-motion:reduce){
 body:not(.ready) .profile>*,body:not(.ready) .highlights>*{opacity:1}
 .reveal-item{opacity:1;transform:none}
 .ba-tile:hover{animation:none}
}

@media(min-width:1101px){.reel-grid:not(.client-reels){grid-template-columns:repeat(4,minmax(0,1fr))}.ba-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:900px){.long-shell{height:auto}.long-stage{aspect-ratio:16/9}}
@media(max-width:760px){#ba-viewer{width:100vw;max-width:100vw}.ba-shell{height:100dvh}}
@media(max-width:650px){.long-shell{height:100dvh}}
@media(max-width:900px){.long-shell{display:block;overflow:auto}.long-stage{aspect-ratio:16/9}}
@media(max-width:760px){.ba-label-edit{right:58px}}
@media(min-width:651px){.long-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 20px}}
.dm-chips button.restart{display:inline-flex;align-items:center;gap:4px;border-color:var(--line);color:var(--muted)}
.dm-chips button.restart svg{width:14px;height:14px}
.dm-chips button.restart:hover{background:var(--button);color:var(--fg)}
.dm-ai-note{margin-top:6px;font-size:11px!important;opacity:.8}
.dm-busy .dm-composer button{opacity:.4}

/* ---------- Case studies (v11) ---------- */
.client-cover{position:relative;height:118px}
.client-result{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;color:#fff;font-size:11px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;background:linear-gradient(180deg,#0000 0%,#0007 100%);padding-bottom:22px;text-shadow:0 1px 8px #0009}
.client-result b{font-size:24px;letter-spacing:-.6px;text-transform:none;line-height:1.1}
.client-card .client-ring{position:relative;z-index:1}

.case-post{margin:18px -20px 4px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg)}
.case-post>header{display:flex;align-items:center;gap:10px;padding:10px 14px}
.case-post>header>.case-meta{display:flex;flex-direction:column;flex:1;min-width:0}
.case-post>header .av{width:34px;height:34px}
.case-post>header strong{font-size:14px}
.case-post>header small{font-size:12px;color:var(--muted)}
.case-frame{position:relative;background:#0c1014}
.case-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;height:clamp(400px,64dvh,600px);outline:none}
.case-track::-webkit-scrollbar{display:none}
.case-slide{flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:16px;padding:34px 30px;color:#f5f5f5;background:radial-gradient(120% 80% at 100% 0%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 60%),#11151a}
.case-slide>*{transition:opacity .6s var(--ease),transform .6s var(--ease)}
.case-slide:not(.in)>*{opacity:0;transform:translateY(14px)}
.case-slide.in>*:nth-child(2){transition-delay:.08s}.case-slide.in>*:nth-child(3){transition-delay:.16s}.case-slide.in>*:nth-child(4){transition-delay:.24s}
.case-kicker{font-size:12px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--accent)}
.case-cover{justify-content:flex-end;background:radial-gradient(90% 60% at 80% 10%,color-mix(in srgb,var(--accent) 55%,transparent),transparent 65%),radial-gradient(70% 50% at 0% 100%,#d300c540,transparent 70%),#0c1014}
.case-big{font-size:clamp(46px,13vw,72px);line-height:.95;letter-spacing:-2.5px;font-weight:800;font-variant-numeric:tabular-nums}
.case-sub{font-size:18px;color:#d6d6d6;margin-top:-8px}
.case-who{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600}
.case-who>.case-meta{display:flex;flex-direction:column}
.case-who small{font-weight:400;color:#a8a8a8;font-size:12px}
.case-who .av{width:36px;height:36px}
.case-swipe{position:absolute;right:22px;bottom:22px;display:flex;align-items:center;gap:4px;font-size:12px;color:#bbb;animation:case-nudge 1.8s var(--ease) infinite}
.case-swipe svg{width:14px;height:14px;transform:rotate(180deg)}
@keyframes case-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
.case-text{font-size:clamp(19px,5vw,24px);line-height:1.35;font-weight:600;letter-spacing:-.3px}
.case-steps{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:s}
.case-steps li{counter-increment:s;display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.35;background:#ffffff0d;border:1px solid #ffffff14;border-radius:12px;padding:11px 13px}
.case-steps li:before{content:counter(s);flex-shrink:0;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff;font-size:12px;font-weight:700}
.case-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.case-stats span{display:flex;flex-direction:column;gap:2px;font-size:12px;color:#a8a8a8;background:#ffffff0d;border-radius:12px;padding:12px 10px}
.case-stats b{font-size:clamp(20px,6vw,28px);color:#fff;letter-spacing:-.8px;font-variant-numeric:tabular-nums}
.case-chart{margin:0;background:#ffffff08;border-radius:12px;padding:12px 12px 8px}
.case-chart svg{width:100%;height:110px;overflow:visible}
.case-line{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1}
.case-area{stroke:none}
.case-area,.case-dot{opacity:0;transition:opacity .6s .9s}
.case-dot{fill:#fff;stroke:var(--accent);stroke-width:3;vector-effect:non-scaling-stroke}
.case-slide.in .case-line{animation:case-draw 1.3s var(--ease) .25s forwards}
.case-slide.in .case-area,.case-slide.in .case-dot{opacity:1}
@keyframes case-draw{to{stroke-dashoffset:0}}
.case-chart figcaption{font-size:11px;color:#8a8a8a;margin-top:6px}
.case-quote{justify-content:center}
.case-mark{font:700 96px/0.6 Georgia,serif;color:var(--accent);height:40px}
.case-quote blockquote{margin:0;font-size:clamp(20px,5.4vw,26px);line-height:1.3;font-weight:600;letter-spacing:-.3px}
.case-count{position:absolute;top:12px;right:12px;background:#000a;color:#fff;font-size:12px;font-weight:600;padding:3px 9px;border-radius:12px;pointer-events:none}
.case-nav{position:absolute;top:50%;width:30px;height:30px;margin-top:-15px;border-radius:50%;background:#ffffffd9;color:#111;display:grid;place-items:center;box-shadow:0 2px 8px #0004}
.case-nav svg{width:16px;height:16px;stroke-width:2.5}
.case-nav.prev{left:10px}.case-nav.next{right:10px}.case-nav.next svg{transform:rotate(180deg)}
.case-nav[hidden]{display:none}
.case-post>footer{position:relative;display:flex;align-items:center;justify-content:flex-start;flex-wrap:nowrap;gap:0;padding:10px 14px;font-size:inherit;color:var(--fg)}
.case-icons{display:flex;gap:14px;align-items:center}
.case-icons button{padding:0;display:grid}
.case-like.on svg{fill:#ff3040;stroke:#ff3040;animation:case-pop .35s var(--ease)}
@keyframes case-pop{50%{transform:scale(1.3)}}
.case-dots{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:4px}
.case-dots i{width:6px;height:6px;border-radius:50%;background:var(--line);transition:background .2s,transform .2s}
.case-dots i.on{background:var(--accent);transform:scale(1.15)}
.case-caption{font-size:14px;padding:0 14px 12px;line-height:1.4}
.case-frame:after{content:'';position:absolute;left:50%;top:50%;width:90px;height:90px;margin:-45px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 21s-7.5-4.6-9.5-9.2C1.2 8.6 3.4 5 6.9 5c2 0 3.4 1.1 5.1 3 1.7-1.9 3.1-3 5.1-3 3.5 0 5.7 3.6 4.4 6.8C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E");opacity:0;transform:scale(.4);pointer-events:none;filter:drop-shadow(0 4px 14px #0007)}
.case-post.burst .case-frame:after{animation:case-burst .8s var(--ease)}
@keyframes case-burst{20%{opacity:1;transform:scale(1.1)}60%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
.case-cover{justify-content:center}
@media(max-width:650px){.case-post{margin:16px -20px 4px}.case-post>footer{padding:10px 14px}.case-track{height:min(125vw,70dvh)}.case-slide{padding:26px 22px}.case-nav{display:none}}
@media(prefers-reduced-motion:reduce){.case-slide>*{transition:none}.case-slide:not(.in)>*{opacity:1;transform:none}.case-line{stroke-dashoffset:0;animation:none}.case-area,.case-dot{opacity:1}.case-swipe{animation:none}}

/* Theme switch reveal: the new theme's snapshot is masked by a canvas of tiny revealed pixels, updated every frame by
   pixelReveal() in script.js. vt-hold keeps the transition open for the length of the reveal. */
::view-transition-old(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){mix-blend-mode:normal;animation:vt-hold .9s linear both;image-rendering:pixelated;
 -webkit-mask-image:var(--vt-mask,none);mask-image:var(--vt-mask,none);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
 -webkit-mask-size:var(--vt-mw,100%) var(--vt-mh,100%);mask-size:var(--vt-mw,100%) var(--vt-mh,100%);-webkit-mask-position:0 0;mask-position:0 0}
@keyframes vt-hold{from{opacity:1}to{opacity:1}}

/* Ads in the Reels tab: badge on the tile and a tag in the viewer. Studio credit chip next to Follow. */
.tile-ad{position:absolute;left:8px;bottom:8px;z-index:2;font-size:11px;font-weight:700;letter-spacing:.6px;color:#111;background:#fff;padding:3px 8px;border-radius:4px}
.feed-ad{margin-left:8px;font-size:11px;font-weight:700;letter-spacing:.5px;color:#111;background:#fff;padding:2px 7px;border-radius:4px}
.feed-studio{flex-shrink:0;font-size:12px;font-weight:600;color:#fff;background:#fff2;border:1px solid #fff5;padding:4px 9px;border-radius:7px;white-space:nowrap}
/* Trial reels (shown by Instagram to non-followers first): corner badge on the tile and on the video. */
.tile-trial,.feed-trial{position:absolute;top:8px;left:8px;z-index:3;font-size:11px;font-weight:700;letter-spacing:.3px;color:#fff;background:#000a;backdrop-filter:blur(6px);border:1px solid #fff4;padding:3px 8px;border-radius:6px;pointer-events:none}
.feed-trial{top:14px;left:14px;font-size:12px}
/* Client rows at the top of the Reels grid: thin outline, client label beside it */
#reel-grid.has-rows{overflow:visible}
.reel-row{grid-column:1/-1;position:relative;padding:4px;border:1px solid var(--line);border-radius:10px;margin-bottom:10px}
.reel-row-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;border-radius:6px;overflow:hidden}
.reel-row-label{display:flex;align-items:center;gap:8px;padding:2px 4px 6px;font-size:13px;font-weight:600;color:var(--fg)}
.reel-row-label .av{width:24px;height:24px;font-size:10px}
@media(min-width:1101px){
 .tab-panels{overflow:visible}
 .reel-row-label{position:absolute;top:2px;right:calc(100% + 16px);display:block;padding:0;z-index:5}
 .reel-row-label .av{display:block;width:38px;height:38px;font-size:13px;box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--line);transition:transform .3s var(--ease)}
 .reel-row-label:hover .av{transform:scale(1.06)}
 .reel-row-label span{position:absolute;top:calc(100% + 10px);left:0;white-space:nowrap;font-size:15px;font-weight:700;color:#fff;background:#16191d;border:1px solid #ffffff1a;padding:7px 12px;border-radius:8px;box-shadow:0 8px 24px #0006;opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .3s ease,transform .35s var(--ease)}
 .reel-row-label:hover span{opacity:1;transform:none}
}
/* Story buttons sit above the tap zones; the rest of the copy lets taps fall through (pointer-events:none) */
#story .story-copy{z-index:4}
/* Testimonials page (heart button) */
.testimonial-list{display:grid;gap:4px;padding:6px 12px 20px}
.testimonial-row{display:flex;align-items:center;gap:14px;width:100%;padding:10px;border-radius:12px;text-align:left;transition:background .2s}
.testimonial-row:hover{background:var(--hover)}
.testimonial-thumb{position:relative;flex-shrink:0;width:54px;height:96px;border-radius:8px;overflow:hidden;background:var(--button)}
.testimonial-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.testimonial-thumb svg{position:absolute;inset:0;margin:auto;width:22px;height:22px;color:#fff;fill:#fff;filter:drop-shadow(0 1px 4px #0008)}
.testimonial-text strong{display:block;font-size:15px}
.testimonial-text small{display:block;color:var(--muted);font-size:13px;margin-top:3px}
/* Start a project keeps the wide size it had as a link */
@media(min-width:651px){.profile-actions>.blue-button{flex:1}.tagged-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.profile-actions>.blue-button{flex:1.3}.reel-row .tile-trial{top:5px;left:5px;font-size:9px;padding:2px 5px;border-radius:4px}}
/* YouTube hover preview on long-form cards */
.long-card .long-thumb .yt-preview,.long-card:hover .long-thumb .yt-preview{border:0;pointer-events:none;transform:scale(1.2);transition:opacity .5s ease}
/* Client rows clear the tab bar on tablet and phone, and sit off the screen edges on phone */
@media(max-width:1100px){.reel-row:first-child{margin-top:12px}}
@media(max-width:650px){.reel-row{margin-left:8px;margin-right:8px}}
/* Trial reel / Ad tag sits top right on grid tiles, just left of the reel icon */
.tile-trial{left:auto;right:36px;top:9px}
@media(max-width:650px){.tile-trial{right:31px;top:7px}.reel-row .tile-trial{left:auto;right:29px;top:7px}}

/* Opening intro: silver name typed out over a dimmed, vignetted wall of reels, about 2s (intro.js) */
#intro{display:none}
.intro body{overflow:hidden}
.intro .handle-row h1,.intro .mobile-header>span{visibility:hidden}
.intro #intro{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;overflow:hidden;background:var(--bg);color:var(--fg);transition:background-color .6s ease .15s}
#intro::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 34% 20% at 50% 50%,rgba(255,255,255,.07),transparent 75%),radial-gradient(ellipse 62% 52% at 50% 50%,transparent 0%,color-mix(in srgb,var(--bg) 45%,transparent) 48%,color-mix(in srgb,var(--bg) 88%,transparent) 78%,var(--bg) 100%);transition:opacity .6s ease}
.intro-bd{position:absolute;inset:0;width:100%;height:100%;opacity:0;transform:scale(1.08);transition:opacity .45s ease,transform 2.6s cubic-bezier(.2,.7,.2,1)}
.intro-bd.css-blur{filter:blur(14px) brightness(.4) saturate(1.2)}
.intro-bd.on{opacity:1;transform:none}
[data-theme=light] .intro-bd.css-blur{filter:blur(14px) saturate(1.15) brightness(1.08)}
[data-theme=light] .intro-bd.on{opacity:.5}
#intro svg{position:relative;z-index:1;display:block;stroke:none;width:100vw;height:calc(clamp(30px,4vw,60px) * 1.8);overflow:visible;transform-origin:0 0;transition:transform .7s cubic-bezier(.65,0,.35,1)}
#intro text{font-family:inherit;font-size:clamp(30px,4vw,60px);font-weight:700;letter-spacing:-.021em}
#intro .intro-pre{fill:currentColor;opacity:0}
.intro-cursor{fill:#c9cce0;transition:opacity .14s ease}[data-theme=light] .intro-cursor{fill:#1a1e33}
#intro[data-phase=moving] .intro-cursor{display:none}
.intro-glass,.intro-solid{transition:opacity .45s ease}
.intro-solid{opacity:0}
#intro[data-phase=moving] .intro-glass{opacity:0}
#intro[data-phase=moving] .intro-solid{opacity:1}
#intro[data-phase=moving] .intro-bd,#intro[data-phase=moving]::after{opacity:0}
#intro[data-phase=moving]{background-color:transparent}
/* After the intro the name is already in place, so it doesn't slide up with the rest of the profile */
.intro-played body .profile>.identity{opacity:1;animation:none}
.intro-played body.ready .handle-row>:not(h1){animation:rise .7s var(--ease) backwards}
@media(prefers-reduced-motion:reduce){#intro{display:none!important}.intro .handle-row h1,.intro .mobile-header>span{visibility:visible}}
/* Entrance for the rest of the page once the intro name has landed (body.ready): the rail and phone bars slide in,
   the tabs and client rows rise after the profile, and the Messages pill rises last. */
@keyframes rail-in{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
@keyframes bar-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:no-preference){
body:not(.ready) :is(.rail nav>*,.rail-bottom>*,.mobile-header>div>*,.bottom-nav>*,#work>.tabs,.reel-row,.dm-pill){opacity:0}
body.ready :is(.rail nav>*,.rail-bottom>*){animation:rail-in .6s var(--ease) backwards}
body.ready .rail nav>:nth-child(1){animation-delay:.05s}body.ready .rail nav>:nth-child(2){animation-delay:.1s}body.ready .rail nav>:nth-child(3){animation-delay:.15s}body.ready .rail nav>:nth-child(4){animation-delay:.2s}body.ready .rail nav>:nth-child(5){animation-delay:.25s}
body.ready .rail-bottom>:nth-child(1){animation-delay:.3s}body.ready .rail-bottom>:nth-child(2){animation-delay:.35s}body.ready .rail-bottom>:nth-child(3){animation-delay:.4s}
body.ready .mobile-header>div>*{animation:rise .6s var(--ease) backwards}
body.ready .mobile-header>div>:nth-child(2){animation-delay:.05s}body.ready .mobile-header>div>:nth-child(3){animation-delay:.1s}body.ready .mobile-header>div>:nth-child(4){animation-delay:.15s}
body.ready .bottom-nav>*{animation:bar-in .6s var(--ease) backwards}
body.ready .bottom-nav>:nth-child(1){animation-delay:.2s}body.ready .bottom-nav>:nth-child(2){animation-delay:.25s}body.ready .bottom-nav>:nth-child(3){animation-delay:.3s}body.ready .bottom-nav>:nth-child(4){animation-delay:.35s}
body.ready #work>.tabs{animation:rise .7s var(--ease) .25s backwards}
body.ready .reel-row{animation:rise .8s var(--ease) .35s backwards}
body.ready .reel-row:nth-child(2){animation-delay:.45s}body.ready .reel-row:nth-child(3){animation-delay:.55s}body.ready .reel-row:nth-child(4){animation-delay:.65s}
body.ready .dm-pill{animation:bar-in .7s var(--ease) .5s backwards,dm-glow 2.8s ease-in-out 1.2s infinite}
}
/* Phone: keep the three stats close together beside the avatar instead of spread across the row */
@media(max-width:650px){.profile .stats{justify-content:flex-start;gap:30px}}
/* Reel viewer: the Trial reel / Ad tag sits top right, matching the grid tiles */
.feed-trial{left:auto;right:14px}


/* Start here collages: a tilted, blurred wall of client stills or case study cards behind the copy. */
#story .story-collage{position:absolute;inset:-20% -25%;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;align-content:center;transform:rotate(-8deg);filter:blur(3px) brightness(.42);pointer-events:none}
#story .story-collage img{width:100%;height:auto;aspect-ratio:9/16;max-height:none;object-fit:cover;border-radius:10px;margin:0}
#story .story-collage-cases{inset:auto;left:50%;top:50%;width:980px;grid-template-columns:repeat(2,1fr);gap:16px;transform:translate(-50%,-50%) rotate(-8deg) scale(.62);filter:blur(4px) brightness(.45);--bg:#151515;--line:#ffffff1f;--muted:#9a9a9a;color:#fff}
#story .story-collage-cases .client-card{opacity:1;transform:none;transition:none}
#story .story-cases .story-copy h2{font-size:clamp(30px,5dvh,40px)}
#story .story-meet>img{opacity:.9}
#story .story-invite>img{object-position:center 30%;opacity:.6}
#story .story-invite:after{background:linear-gradient(#0008,transparent 25%,#000b 60%,#000 100%)}
#story .story-invite{align-items:flex-end}
#story .story-invite .story-copy{padding-bottom:110px}
#story .story-intro>img{object-position:center 30%;opacity:.9}
#story .story-intro:after{background:linear-gradient(#0006,transparent 25%,#000b 58%,#000 100%)}
#story .story-intro{align-items:flex-end}
#story .story-intro .story-copy{padding-bottom:120px}

/* Story testimonial loading: poster behind the video, a spinner while it buffers, and a Tap to play fallback for iPhone Safari. */
#story .testimonial-video-wrap{background:#000 var(--poster) center/contain no-repeat;background-origin:content-box}
#story .testimonial-video-wrap video{background:transparent}
#story .testimonial-video-wrap.is-waiting:after{content:'';position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border:3px solid #fff4;border-top-color:#fff;border-radius:50%;animation:story-spin .8s linear infinite;pointer-events:none;z-index:4}
@keyframes story-spin{to{transform:rotate(360deg)}}
#story .story-video-tap{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;padding:12px 20px;border-radius:999px;background:#000a;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font-size:15px;font-weight:700;z-index:8}
#story .story-video-tap[hidden]{display:none}
#story .story-video-tap svg{width:18px;height:18px;fill:#fff}
/* iPhone Safari zooms into any text field under 16px when it's tapped. */
@media(pointer:coarse){.dm-composer input{font-size:16px}}

/* About me photo stories: the whole photo (captions are part of it), letterboxed on a blurred copy of itself. */
#story .story-photo{position:relative;height:100%;overflow:hidden;background:#000}
#story .story-photo:before{content:'';position:absolute;inset:-30px;background:var(--photo) center/cover;filter:blur(24px) brightness(.55)}
#story .story-photo img{position:relative;display:block;width:100%;height:100%;max-height:none;object-fit:contain;margin:0;border-radius:0}
#story .story-video-speed[hidden]{display:none}
.client-credit{margin-top:-2px;font-size:11px;font-weight:600;letter-spacing:.2px;color:var(--muted)}
.client-result.is-dim{background:linear-gradient(180deg,#0006 0%,#000a 100%)}
#client-sheet .panel-header h2{flex:1;min-width:0;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#client-sheet .panel-header .client-sheet-credit{width:auto;flex-shrink:0;font-size:12px;font-weight:600;color:var(--muted);background:var(--button);padding:5px 10px;border-radius:20px;white-space:nowrap}
.client-collage{position:absolute;inset:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(60px,1fr));grid-auto-rows:100%;gap:2px;overflow:hidden;transform:scale(1.04);transition:transform .6s var(--ease)}
.client-cover .client-collage img{width:100%;height:100%;object-fit:cover;filter:brightness(.85);transform:none;transition:none}
.client-card:hover .client-collage{transform:scale(1.1)}
@media(max-width:650px){.tagged-grid{grid-template-columns:1fr}}
.ba-stage.is-loading:after{content:'';position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:3px solid #ffffff40;border-top-color:#fff;animation:ba-spin .8s linear infinite;z-index:4;pointer-events:none}
@keyframes ba-spin{to{transform:rotate(360deg)}}
/* The name looks the same everywhere: Apple's SF on Apple devices, Inter (its closest match) on Android and Windows instead of Roboto/Segoe. */
.handle-row h1,.mobile-header>span{font-family:-apple-system,BlinkMacSystemFont,Inter,"Helvetica Neue",Arial,sans-serif;font-weight:700;letter-spacing:-.5px}
.mobile-header>span{font-size:24px}
/* Case study carousel, Apple-style: follows the site theme, SF/Inter type, quiet surfaces, accent for emphasis. */
.case-frame{--case-surface:color-mix(in srgb,var(--fg) 4%,var(--bg));--case-tile:color-mix(in srgb,var(--fg) 6%,var(--bg));background:var(--case-surface)}
.case-slide,.case-cover{color:var(--fg);background:var(--case-surface);font-family:-apple-system,BlinkMacSystemFont,Inter,"Helvetica Neue",Arial,sans-serif;padding:40px 34px;gap:14px}
.case-cover{background:radial-gradient(80% 55% at 85% 0%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 70%),var(--case-surface)}
.case-kicker{font-size:15px;font-weight:600;letter-spacing:-.1px;text-transform:none;color:var(--accent)}
.case-big{font-weight:700;letter-spacing:-.04em;line-height:1;background:linear-gradient(135deg,var(--fg) 30%,var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:4px}
.case-sub{font-size:clamp(19px,4.6vw,22px);font-weight:600;letter-spacing:-.3px;color:var(--muted);margin-top:-6px}
.case-who{margin-top:10px}
.case-who small{color:var(--muted)}
.case-swipe{color:var(--muted);font-weight:500}
.case-text{font-size:clamp(22px,5.6vw,30px);line-height:1.2;font-weight:700;letter-spacing:-.6px}
.case-steps{gap:0;background:var(--case-tile);border-radius:18px;padding:4px 16px}
.case-steps li{background:none;border:0;border-radius:0;padding:14px 0;font-size:16px;font-weight:500;letter-spacing:-.2px;align-items:center}
.case-steps li+li{border-top:1px solid color-mix(in srgb,var(--fg) 10%,transparent)}
.case-steps li:before{width:28px;height:28px;border-radius:8px;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);font-size:13px}
.case-stats{gap:10px}
.case-stats span{background:var(--case-tile);border-radius:18px;padding:16px 14px;color:var(--muted);font-size:13px;font-weight:500;gap:4px}
.case-stats span:first-child{grid-column:1/-1;padding:20px 18px}
.case-stats span:first-child b{font-size:clamp(40px,11vw,56px);background:linear-gradient(135deg,var(--fg) 30%,var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.case-stats b{color:var(--fg);font-weight:700;letter-spacing:-.04em;font-size:clamp(26px,7vw,34px);line-height:1.05}
.case-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.case-chart{background:var(--case-tile);border-radius:18px}
.case-mark{font:700 80px/.6 -apple-system,BlinkMacSystemFont,Inter,sans-serif;color:var(--accent);height:34px}
.case-quote blockquote{font-size:clamp(22px,5.6vw,28px);line-height:1.22;font-weight:700;letter-spacing:-.6px}
.case-count,.case-nav{background:color-mix(in srgb,var(--bg) 62%,transparent);color:var(--fg);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);border:1px solid color-mix(in srgb,var(--fg) 8%,transparent);box-shadow:0 4px 16px #0000001f}
.case-nav{width:36px;height:36px;margin-top:-18px}
.case-dots{gap:6px}
.case-dots i{transition:width .3s var(--ease),background .2s}
.case-dots i.on{width:18px;border-radius:3px;transform:none}
@media(max-width:650px){.case-slide,.case-cover{padding:30px 24px}}
@media(min-width:651px){.case-slide,.case-cover{padding:40px 62px}}
.case-stats span:first-child{position:relative}
.case-up{position:absolute;top:22px;right:18px;font-style:normal;font-size:13px;font-weight:700;color:var(--accent);background:color-mix(in srgb,var(--accent) 13%,transparent);padding:4px 9px;border-radius:20px}
.case-cmp{position:relative;height:150px;margin:14px 0 2px 26px}
.case-cmp-grid{position:absolute;inset:0 0 20px}
.case-cmp-grid i{position:absolute;left:0;right:0;height:0;border-top:1px solid color-mix(in srgb,var(--fg) 9%,transparent)}
.case-cmp-grid i b{position:absolute;left:-26px;top:-7px;width:20px;text-align:right;font-size:10px;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.case-cmp-grid s{position:absolute;left:0;right:0;height:0;border-top:1.5px dashed color-mix(in srgb,var(--fg) 35%,transparent);text-decoration:none;z-index:2;opacity:0;transition:opacity .5s 1.2s}
.case-cmp-grid s b{position:absolute;right:0;top:-18px;font-size:10px;font-weight:600;color:var(--muted);background:var(--case-tile);padding:0 4px}
.case-cmp-bars{position:absolute;inset:0;display:flex;justify-content:space-around;align-items:stretch;padding:0 6%}
.case-cmp-bar{position:relative;flex:0 0 30%;padding:0;color:var(--fg);cursor:pointer;transition:opacity .25s}
.case-cmp-bar i{position:absolute;left:0;right:0;bottom:20px;height:calc(var(--h) * 130px);border-radius:8px 8px 3px 3px;background:color-mix(in srgb,var(--fg) 24%,transparent);transform:scaleY(0);transform-origin:bottom;transition:transform 1s cubic-bezier(.2,.8,.2,1) var(--d)}
.case-cmp-bar.is-now i{background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 60%,transparent))}
.case-cmp-bar b{position:absolute;left:0;right:0;bottom:calc(24px + var(--h) * 130px);font-size:14px;font-weight:700;letter-spacing:-.3px;text-align:center;opacity:0;transition:opacity .4s calc(var(--d) + .7s)}
.case-cmp-bar.is-now b{color:var(--accent)}
.case-cmp-bar small{position:absolute;left:-20%;right:-20%;bottom:0;font-size:11px;font-weight:500;color:var(--muted);text-align:center;white-space:nowrap}
.case-cmp-bars:hover .case-cmp-bar:not(:hover),.case-cmp-bars:has(.case-cmp-bar:focus-visible) .case-cmp-bar:not(:focus-visible){opacity:.4}
.case-slide.in .case-cmp-bar i{transform:scaleY(1)}
.case-slide.in .case-cmp-bar b,.case-slide.in .case-cmp-grid s{opacity:1}
@media(max-width:650px){.case-cmp{height:130px}.case-cmp-bar i{height:calc(var(--h) * 110px)}.case-cmp-bar b{bottom:calc(24px + var(--h) * 110px)}}
@media(prefers-reduced-motion:reduce){.case-cmp-bar i{transform:none;transition:none}.case-cmp-bar b,.case-cmp-grid s{opacity:1;transition:none}}
.case-stats span:first-child .case-cmp b{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--fg);font-size:14px;font-weight:700;letter-spacing:-.2px;line-height:1.2}
.case-stats span:first-child .case-cmp-grid b{font-size:10px;font-weight:500;color:var(--muted)}
.case-stats span:first-child .case-cmp-grid s b{font-weight:600;background:var(--case-tile)}
.case-stats span:first-child .case-cmp-bar.is-now b{color:var(--accent)}
.case-cmp-bar.is-now i{background:linear-gradient(180deg,color-mix(in srgb,#fff 18%,var(--accent)),var(--accent))}
.case-cmp i,.case-cmp s{font-style:normal}
.case-tag{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:999px;font-size:14px;font-weight:600;letter-spacing:-.2px;color:var(--fg);background:color-mix(in srgb,var(--accent) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.case-tag i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff}
.case-tag svg{width:14px;height:14px;stroke-width:2.6}